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.

Practice

1. What is the main benefit of using Firebase Modular SDK (v9+) with tree-shaking?

easy

A. It reduces app size by including only needed Firebase features.

B. It automatically backs up your Firebase database.

C. It increases the number of Firebase services loaded by default.

D. It disables Firebase authentication for faster login.

Solution

1. Step 1: Understand tree-shaking purpose

   Tree-shaking removes unused code to reduce app size and improve performance.

2. Step 2: Apply to Firebase Modular SDK

   Using modular imports in Firebase v9+ allows only needed services to be included, enabling tree-shaking.

3. Final Answer:

   It reduces app size by including only needed Firebase features. -> Option A

4. Quick Check:

   Tree-shaking = smaller app size [OK]

Hint: Remember: modular imports keep only what you use [OK]

Common Mistakes:

• Thinking tree-shaking adds features automatically
• Confusing tree-shaking with backup or security
• Assuming all Firebase services load by default

2. Which import statement correctly uses Firebase Modular SDK (v9+) for Firestore to enable tree-shaking?

easy

A. import { Firestore } from 'firebase/app';

B. import { getFirestore } from 'firebase/firestore';

C. import firebase from 'firebase';

D. import * as firestore from 'firebase/firestore';

Solution

1. Step 1: Identify modular import syntax

   Firebase v9+ uses named imports from specific service packages like 'firebase/firestore'.

2. Step 2: Check each option

   import { getFirestore } from 'firebase/firestore'; correctly imports getFirestore from 'firebase/firestore' for modular usage. Others use old or incorrect syntax.

3. Final Answer:

   import { getFirestore } from 'firebase/firestore'; -> Option B

4. Quick Check:

   Modular import = named import from service path [OK]

Hint: Use named imports from 'firebase/service' for modular SDK [OK]

Common Mistakes:

• Using default import from 'firebase' package
• Importing from 'firebase/app' instead of service path
• Using wildcard imports that prevent tree-shaking

3. Given the code below, what will be the output in the console?

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

const app = initializeApp({ apiKey: 'abc', authDomain: 'xyz' });
const auth = getAuth(app);
console.log(typeof auth.currentUser);

medium

A. 'null'

B. 'undefined'

C. 'function'

D. 'object'

Solution

1. Step 1: Understand getAuth and currentUser

   getAuth returns an Auth instance; currentUser is a property that is either null or a user object.

2. Step 2: Check typeof currentUser before login

   Before login, currentUser is null, and typeof null is 'object' in JavaScript.

3. Final Answer:

   'object' -> Option D

4. Quick Check:

   typeof null = 'object' in JS [OK]

Hint: Remember: typeof null returns 'object' in JavaScript [OK]

Common Mistakes:

• Assuming currentUser is undefined before login
• Confusing typeof null with 'null' string
• Thinking currentUser is a function

4. Identify the error in this Firebase Modular SDK (v9+) import code:

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const app = initializeApp(config);
const db = getFirestore();

medium

A. getFirestore() requires the app instance as an argument.

B. initializeApp should be imported from 'firebase/firestore'.

C. config object is missing from the code.

D. getFirestore must be called before initializeApp.

Solution

1. Step 1: Check usage of initializeApp

   initializeApp requires a config object to initialize Firebase app.

2. Step 2: Verify presence of config object

   The code uses 'config' but does not define or import it, causing a ReferenceError.

3. Final Answer:

   config object is missing from the code. -> Option C

4. Quick Check:

   Missing config causes initialization error [OK]

Hint: Always define config before initializeApp call [OK]

Common Mistakes:

• Forgetting to pass app to getFirestore (optional but recommended)
• Importing initializeApp from wrong package
• Calling getFirestore before app initialization

5. You want to optimize your Firebase app bundle size by importing only Authentication and Firestore services using Modular SDK (v9+). Which code snippet correctly achieves this with tree-shaking?

hard

A. import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

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

B. import firebase from 'firebase';

const app = firebase.initializeApp(config);
const auth = firebase.auth();
const db = firebase.firestore();

C. import { initializeApp, getAuth, getFirestore } from 'firebase/app';

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

D. import { initializeApp } from 'firebase/app';
import { auth, firestore } from 'firebase';

const app = initializeApp(config);
const authInstance = auth(app);
const dbInstance = firestore(app);

Solution

1. Step 1: Use modular imports from correct packages

   Authentication and Firestore must be imported from 'firebase/auth' and 'firebase/firestore' respectively for tree-shaking.

2. Step 2: Initialize app and pass it to service getters

   Initialize app with config, then pass app instance to getAuth and getFirestore functions.

3. Step 3: Check each option

   import { initializeApp } from 'firebase/app'; import { getAuth } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; const app = initializeApp(config); const auth = getAuth(app); const db = getFirestore(app); correctly imports and initializes services modularly. Others use old syntax or wrong imports preventing tree-shaking.

4. Final Answer:

   Option A code snippet -> Option A

5. Quick Check:

   Modular imports + app passed = optimized bundle [OK]

Hint: Import each service from its own package and pass app [OK]

Common Mistakes:

• Using default firebase import disables tree-shaking
• Importing multiple services from 'firebase/app' only
• Not passing app instance to service getters