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.