Modular SDK (v9+) tree-shaking in Firebase - Step-by-Step Execution

Process Flow - Modular SDK (v9+) tree-shaking

Import only needed functions

↓

Build app with modular imports

↓

Bundle tool analyzes imports

↓

Remove unused code (tree-shaking)

↓

Deploy smaller optimized bundle

↓

App runs faster with less code

The modular SDK lets you import only what you need. The bundler removes unused parts, making your app smaller and faster.

Execution Sample

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(config);
const auth = getAuth(app);

This code imports only the app initialization and auth functions, so unused Firebase features are excluded from the final bundle.

Process Table

Step	Action	Import Used	Bundle Size Impact	Result
1	Import initializeApp	initializeApp	Includes core app code	Core Firebase initialized
2	Import getAuth	getAuth	Includes auth code only	Auth module ready
3	No other imports	None	Unused code removed	Smaller bundle size
4	Bundle tool analyzes imports	initializeApp, getAuth	Tree-shaking removes unused	Optimized bundle created
5	Deploy app	Optimized imports	Faster load and run	App runs with minimal code

💡 All unused Firebase modules excluded, final bundle contains only imported features.

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
app	undefined	initialized with config	initialized	initialized	initialized
auth	undefined	undefined	initialized with app	initialized	initialized

Key Moments - 3 Insights

Why does importing only specific functions reduce bundle size?

Because the bundler removes unused code not imported, as shown in execution_table step 3 where unused modules are excluded.

What happens if you import the whole Firebase SDK instead of modular imports?

The bundle includes all Firebase code, making it larger and slower, unlike the optimized modular imports in step 4.

How does tree-shaking know which code to remove?

It analyzes the import statements and removes code not referenced, as described in step 4 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is included after importing getAuth at step 2?

A Only core app code

B Auth module code only

C All Firebase modules

D No code included yet

💡 Hint

Check the 'Import Used' and 'Bundle Size Impact' columns at step 2 in execution_table.

At which step does the bundler remove unused Firebase code?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look for 'Unused code removed' in the 'Bundle Size Impact' column in execution_table.

If you added import for Firestore, how would the bundle size change?

A Bundle size increases

B Bundle size stays the same

C Bundle size decreases

D Bundle size is unpredictable

💡 Hint

Adding imports adds code, so see how importing getAuth increased bundle size in execution_table step 2.

Concept Snapshot

Modular SDK (v9+) uses selective imports.
Import only needed Firebase functions.
Bundler removes unused code (tree-shaking).
Result: smaller, faster app bundles.
Avoid importing entire SDK to optimize performance.

Full Transcript

The Modular SDK in Firebase version 9 and above allows developers to import only the specific functions they need, such as initializeApp and getAuth. This selective importing helps bundlers identify unused code and remove it during the build process, a technique called tree-shaking. As a result, the final app bundle is smaller and loads faster. The execution steps show importing initializeApp first, then getAuth, with the bundler removing all other unused Firebase modules before deployment. This approach improves app performance by including only necessary Firebase features.