Bundle preloading in Firebase - Commands & Configuration

Introduction

Bundle preloading helps your web app load faster by telling the browser to start downloading important files early. This reduces waiting time when users navigate your app.

When you want your app's main JavaScript files to load quickly on first visit.

When you have large code bundles that delay page rendering.

When you want to improve user experience by reducing loading spinners.

When you want to optimize performance on slow internet connections.

When you want to prepare the browser to fetch code chunks before they are needed.

Config File - firebase.json

firebase.json

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

This configuration tells Firebase Hosting to add a Link header for the /static/js/main.js file.

The header uses rel=preload to tell browsers to start loading main.js early as a script.

This helps the browser fetch important code bundles faster, improving app load speed.

Commands

Deploys your Firebase Hosting site with the updated preload headers so browsers can start loading bundles early.

Terminal

firebase deploy --only hosting

Expected Output

=== Deploying to 'your-project-id'...



i  deploying hosting

i  hosting[your-project-id]: beginning deploy...

✔  hosting[your-project-id]: deployed successfully



✔  Deploy complete!

→

--only hosting - Deploy only the hosting part without affecting other Firebase services

Checks the HTTP headers of the main.js file to verify the preload header is present.

Terminal

curl -I https://your-project-id.web.app/static/js/main.js

Expected Output

HTTP/2 200 

content-type: application/javascript

link: </static/js/main.js>; rel=preload; as=script

cache-control: public, max-age=31536000

...

Key Concept

If you remember nothing else from this pattern, remember: preload headers tell browsers to fetch important files early, speeding up your app load.

Common Mistakes

Not specifying the correct file path in the preload header source.

The browser won't preload the intended files if the path doesn't match the actual file location.

Ensure the source path in firebase.json matches the exact location of your JavaScript bundles.

Forgetting to redeploy Firebase Hosting after changing the preload configuration.

Changes won't take effect until you deploy, so preload headers won't be sent to browsers.

Always run 'firebase deploy --only hosting' after updating preload settings.

Summary

Add preload headers in firebase.json to tell browsers which bundles to load early.

Deploy the hosting configuration with 'firebase deploy --only hosting'.

Verify headers with curl to ensure preload is active.