Bundle preloading in Firebase - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Bundle Preloading Purpose

What is the main benefit of using bundle preloading in a Firebase web app?

A It delays loading of all bundles until the user interacts with the app.

B It compresses all bundles into a single file to reduce network requests.

C It reduces the initial load time by loading critical code bundles before they are needed.

D It automatically caches bundles only after the user closes the app.

💡 Hint

Think about how preloading affects when code is downloaded.

Bundle preloading helps by loading important code early, so the app feels faster when users navigate.

❓ Configuration

intermediate

Configuring Bundle Preloading in Firebase Hosting

Which Firebase Hosting configuration snippet correctly preloads a JavaScript bundle named main.js?

A { "headers": [{ "source": "/main.js", "headers": [{ "key": "Cache-Control", "value": "preload" }] }] }

B { "headers": [{ "source": "/main.js", "headers": [{ "key": "Link", "value": "</main.js>; rel=preload; as=script" }] }] }

C { "headers": [{ "source": "/main.js", "headers": [{ "key": "Preload", "value": "script" }] }] }

D { "headers": [{ "source": "/main.js", "headers": [{ "key": "Link", "value": "</main.js>; rel=stylesheet" }] }] }

💡 Hint

Look for the correct HTTP header and relation type for preloading scripts.

The Link header with rel=preload and as=script tells browsers to preload the JavaScript file.

❓ Architecture

advanced

Optimizing Bundle Preloading Strategy

You have a Firebase app with multiple code bundles. Which strategy best balances fast initial load and efficient bandwidth when using bundle preloading?

A Preload only the main bundle and defer others until needed.

B Preload all bundles at once on the first page load.

C Never preload any bundles and load all on demand.

D Preload only the smallest bundle regardless of usage.

💡 Hint

Consider user experience and network usage trade-offs.

Preloading only the main bundle ensures quick startup without wasting bandwidth on unused code.

❓ security

advanced

Security Implications of Bundle Preloading

What is a potential security risk when improperly configuring bundle preloading in Firebase Hosting?

A Disabling HTTPS for preloaded bundles.

B Automatically encrypting bundles causing runtime errors.

C Blocking all network requests due to preloading headers.

D Exposing sensitive code bundles to unauthorized users by preloading them publicly.

💡 Hint

Think about who can access preloaded resources.

If sensitive bundles are preloaded without access control, unauthorized users might download them.

❓ service_behavior

expert

Effect of Bundle Preloading on Firebase Hosting Cache Behavior

When you add a Link header with rel=preload for a bundle in Firebase Hosting, how does it affect the browser cache behavior for that bundle?

A The browser fetches and caches the bundle early, improving load speed on subsequent navigations.

B The browser ignores caching and always fetches the bundle from the server.

C The bundle is cached only if the user explicitly refreshes the page.

D The bundle is removed from cache immediately after preloading.

💡 Hint

Consider how preloading interacts with browser caching mechanisms.

Preloading causes the browser to fetch and store the bundle early, so it can be reused without delay later.

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