Bundle preloading in Firebase - Mini Project: Build & Apply

Bundle Preloading with Firebase Hosting

📖 Scenario: You are managing a website hosted on Firebase Hosting. To improve the loading speed of your web app, you want to preload a JavaScript bundle file so that the browser fetches it early.

🎯 Goal: Configure Firebase Hosting to preload a JavaScript bundle file named bundle.js by adding the correct HTTP header in the firebase.json configuration file.

📋 What You'll Learn

Create a firebase.json file with hosting configuration

Add a headers section to preload /bundle.js

Set the Link header with </bundle.js>; rel=preload; as=script

Ensure the configuration is valid and deployable

💡 Why This Matters

🌍 Real World

Preloading bundles helps websites load faster by telling browsers to fetch important files early, improving user experience.

💼 Career

Cloud engineers and web developers often configure hosting services like Firebase to optimize asset delivery and site speed.

1

Create the basic Firebase Hosting configuration

Create a firebase.json file with a hosting section that has a public directory set to public.

Firebase

{
  "hosting": {
    "public": "public"
    // Your code here
  }
}

Need a hint?

The firebase.json file must have a hosting object with a public key set to "public".

2

Add headers configuration for bundle.js

Inside the hosting section, add a headers array with one object that has source set to /bundle.js.

Firebase

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "/bundle.js"
        // Your code here
      }
    ]
  }
}

Need a hint?

The headers array must contain an object with the source key exactly set to "/bundle.js".

3

Add the Link header to preload the bundle

Inside the object in the headers array, add a headers array with one object that sets key to Link and value to </bundle.js>; rel=preload; as=script.

Firebase

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "/bundle.js",
        "headers": [
          {
            "key": "Link",
            "value": "; rel=preload; as=script"
            // Your code here
          }
        ]
      }
    ]
  }
}

Need a hint?

The headers array inside the source object must have an object with key "Link" and the correct value to preload the script.

4

Complete and validate the firebase.json configuration

Ensure the firebase.json file is a valid JSON object with the hosting section containing public and headers configured to preload /bundle.js with the correct Link header.

Firebase

{
  "hosting": {
    "public": "public",
    "headers": [
      {
        "source": "/bundle.js",
        "headers": [
          {
            "key": "Link",
            "value": "; rel=preload; as=script"
          }
        ]
      }
    ]
  }
}
# Validate the JSON structure and save the file

Need a hint?

Make sure the JSON is valid and all required keys and values are present exactly as specified.