Bundle preloading in Firebase - Step-by-Step Execution

Process Flow - Bundle preloading

App starts loading

↓

Detect bundles needed

↓

Start preloading bundles

↓

Bundles download in background

↓

Bundles ready when needed

↓

App uses preloaded bundles

↓

Faster app startup and navigation

The app detects which code bundles it will need soon, starts downloading them early in the background, so when the user navigates, the bundles are ready and the app feels faster.

Execution Sample

Firebase

firebase.app().preloadBundles(['bundle1.js', 'bundle2.js']);
// Later when navigating
firebase.app().loadBundle('bundle1.js');

This code tells Firebase to start downloading bundles early, then later loads a bundle instantly from the preloaded cache.

Process Table

Step	Action	Bundle	Status	Effect
1	App starts	-	No bundles loaded	App begins loading
2	Detect bundles to preload	bundle1.js, bundle2.js	Scheduled	Bundles marked for preloading
3	Start preloading bundle1.js	bundle1.js	Downloading	Background download starts
4	Start preloading bundle2.js	bundle2.js	Downloading	Background download starts
5	bundle1.js download complete	bundle1.js	Ready	Bundle cached and ready
6	bundle2.js download complete	bundle2.js	Ready	Bundle cached and ready
7	User navigates to feature needing bundle1.js	bundle1.js	Loaded instantly	App uses preloaded bundle, fast load
8	User navigates to feature needing bundle2.js	bundle2.js	Loaded instantly	App uses preloaded bundle, fast load
9	No more bundles to preload	-	-	Preloading complete

💡 All bundles preloaded and used, app navigation is faster due to preloading

Status Tracker

Variable	Start	After Step 3	After Step 5	After Step 7	Final
bundle1.js status	Not loaded	Downloading	Ready	Loaded instantly	Loaded
bundle2.js status	Not loaded	Downloading	Ready	Loaded instantly	Loaded
preload queue	Empty	Empty	Empty	Empty	Empty

Key Moments - 3 Insights

Why does the app start downloading bundles before the user navigates to them?

Preloading bundles early means they are ready instantly when needed, avoiding waiting time during navigation (see execution_table steps 3-6).

What happens if the user never navigates to a preloaded bundle?

The bundle remains cached but unused, which is a trade-off for faster navigation if used (see execution_table step 9).

How does preloading improve app speed?

Because bundles are downloaded in the background before use, loading them later is instant (see execution_table steps 7-8).

Visual Quiz - 3 Questions

Look at the execution table, what is the status of bundle1.js after step 5?

A Loaded instantly

B Downloading

C Ready

D Not loaded

💡 Hint

Check the 'Status' column for bundle1.js at step 5 in the execution_table

At which step does the app use the preloaded bundle1.js?

A Step 7

B Step 3

C Step 5

D Step 9

💡 Hint

Look for 'Loaded instantly' status for bundle1.js in the execution_table

If bundle2.js never finishes downloading, what would happen when the user navigates to it?

A It loads instantly from cache

B App waits for download to complete

C App crashes

D Bundle is ignored

💡 Hint

Consider the meaning of 'Ready' and 'Downloading' statuses in the execution_table

Concept Snapshot

Bundle Preloading in Firebase:
- Detect bundles needed soon
- Start downloading bundles in background
- Cache bundles when ready
- Load bundles instantly on navigation
- Improves app speed and user experience

Full Transcript

Bundle preloading means the app starts downloading code bundles early, before the user needs them. This way, when the user navigates to a feature, the bundle is already downloaded and loads instantly. The process starts with detecting which bundles will be needed, then downloading them quietly in the background. Once downloaded, bundles are cached and ready. When the user navigates, the app uses the cached bundles, making the app feel faster. If a bundle is never used, it remains cached but unused. This trade-off helps improve app speed and smoothness.

Practice

1. What is the main purpose of bundle preloading in Firebase Hosting?

easy

A. To download important code bundles early for faster app loading

B. To increase the size of the app bundle for better caching

C. To delay loading of all code until user interaction

D. To disable code splitting in the app

Solution

1. Step 1: Understand bundle preloading concept

   Bundle preloading downloads code bundles early before they are needed to speed up app loading.

2. Step 2: Identify the main benefit

   This early download improves user experience by reducing wait time when features are accessed.

3. Final Answer:

   To download important code bundles early for faster app loading -> Option A

4. Quick Check:

   Bundle preloading = early download for speed [OK]

Hint: Preloading means downloading code before it's needed [OK]

Common Mistakes:

• Thinking preloading delays code loading
• Confusing preloading with disabling code splitting
• Assuming preloading increases bundle size

2. Which is the correct way to configure bundle preloading in firebase.json under hosting?

easy

A. "preloadBundles": {"bundle1.js": true, "bundle2.js": true}

B. "preloadBundles": "bundle1.js, bundle2.js"

C. "preloadBundles": ["bundle1.js", "bundle2.js"]

D. "preloadBundles": [bundle1.js, bundle2.js]

Solution

1. Step 1: Review JSON array syntax for preloadBundles

   The correct syntax uses an array of strings listing bundle filenames.

2. Step 2: Identify correct JSON format

   "preloadBundles": ["bundle1.js", "bundle2.js"] correctly uses an array of quoted strings, which is valid JSON.

3. Final Answer:

   "preloadBundles": ["bundle1.js", "bundle2.js"] -> Option C

4. Quick Check:

   Preload bundles = array of strings [OK]

Hint: Use array of quoted strings for bundle names in JSON [OK]

Common Mistakes:

• Using unquoted bundle names causing syntax errors
• Passing bundles as a single string instead of array
• Using object instead of array for bundles

3. Given this firebase.json snippet:

{
  "hosting": {
    "preloadBundles": ["main.js", "feature.js"]
  }
}

What happens when a user visits the site?

medium

A. Only 'main.js' loads immediately; 'feature.js' loads on demand

B. Both 'main.js' and 'feature.js' start downloading early to speed up usage

C. Neither bundle loads until user clicks a feature

D. 'feature.js' loads first, then 'main.js' after

Solution

1. Step 1: Understand preloadBundles effect

   Bundles listed in preloadBundles start downloading early when the site loads.

2. Step 2: Apply to given bundles

   Both 'main.js' and 'feature.js' will preload to improve speed when features are used.

3. Final Answer:

   Both 'main.js' and 'feature.js' start downloading early to speed up usage -> Option B

4. Quick Check:

   Preload means early download of all listed bundles [OK]

Hint: Preload bundles download early, not on demand [OK]

Common Mistakes:

• Assuming only main bundle preloads
• Thinking bundles load only after user action
• Believing preload order is reversed

4. You configured preloadBundles in firebase.json as:

{
  "hosting": {
    "preloadBundles": ["app.js", app2.js"]
  }
}

What is the problem with this configuration?

medium

A. Bundle names must include full URL paths

B. Using preloadBundles inside hosting is not supported

C. Bundles must be objects, not strings

D. Missing quotes around 'app2.js' causes JSON syntax error

Solution

1. Step 1: Check JSON syntax for bundle names

   All bundle names must be strings enclosed in double quotes.

2. Step 2: Identify error in given config

   'app2.js' is missing quotes, causing invalid JSON syntax.

3. Final Answer:

   Missing quotes around 'app2.js' causes JSON syntax error -> Option D

4. Quick Check:

   JSON strings need quotes [OK]

Hint: Always quote bundle names as strings in JSON [OK]

Common Mistakes:

• Forgetting quotes around bundle names
• Placing preloadBundles outside hosting
• Using objects instead of string arrays

5. You want to preload bundles only for features users often visit first, but not preload large rarely used bundles. How should you configure firebase.json to optimize loading?

hard

A. List only frequently used bundles in preloadBundles to download early

B. Preload all bundles regardless of usage to avoid delays

C. Do not use preloadBundles; load all bundles on demand

D. Preload only the largest bundles to improve caching

Solution

1. Step 1: Understand preload strategy

   Preloading bundles that users access often improves perceived speed without wasting bandwidth.

2. Step 2: Apply selective preloading

   Only list frequently used bundles in preloadBundles to optimize loading and avoid unnecessary downloads.

3. Final Answer:

   List only frequently used bundles in preloadBundles to download early -> Option A

4. Quick Check:

   Preload important bundles only for best performance [OK]

Hint: Preload only bundles users need early to save bandwidth [OK]

Common Mistakes:

• Preloading all bundles causing slow initial load
• Ignoring usage patterns when preloading
• Preloading large unused bundles wasting resources