Bundle size analysis in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does Angular's bundle size primarily affect?

In Angular applications, why is it important to keep the bundle size small?

A Because larger bundles increase the number of components in the app automatically.

B Because smaller bundles load faster, improving user experience especially on slow networks.

C Because bundle size controls the number of Angular modules you can create.

D Because smaller bundles reduce the number of HTTP requests the server can handle.

💡 Hint

Think about what happens when a user opens your app on a slow internet connection.

Smaller bundles mean less data to download, so the app loads faster and feels smoother to users.

❓ component_behavior

intermediate

How does lazy loading affect Angular bundle size?

Consider an Angular app with many feature modules. What happens to the initial bundle size when lazy loading is used?

A The initial bundle size becomes zero because lazy loading removes all code from the main bundle.

B The initial bundle size increases because lazy loading duplicates code.

C The initial bundle size stays the same because all modules are bundled together anyway.

D The initial bundle size decreases because feature modules are loaded only when needed.

💡 Hint

Think about when the code for a feature module is downloaded in lazy loading.

Lazy loading splits the app so that feature modules load only when the user navigates to them, reducing the initial bundle size.

📝 Syntax

advanced

Identify the correct Angular CLI command to analyze bundle size

Which Angular CLI command correctly generates a detailed bundle size report?

A ng build --stats-json

B ng serve --stats-report

C ng test --bundle-analyze

D ng lint --bundle-size

💡 Hint

The command should create a JSON file with build stats.

The ng build --stats-json command creates a stats.json file used for bundle analysis.

🔧 Debug

advanced

Why does the Angular bundle include unused code?

You notice your Angular bundle is large and includes code from a library you no longer use. What is the most likely cause?

A The library is imported somewhere but never removed, so tree shaking cannot remove it.

B Angular automatically bundles all installed libraries regardless of usage.

C The Angular CLI disables tree shaking by default.

D The library code is included because it is referenced only in comments.

💡 Hint

Think about how unused imports affect the final bundle.

If a library is imported in code, even if unused, it can be included in the bundle unless tree shaking removes it.

❓ state_output

expert

What is the size of the main bundle after enabling differential loading?

An Angular app is built with differential loading enabled. The ES2015 bundle is 1.2MB and the ES5 bundle is 1.8MB. What is the size of the main bundle served to modern browsers?

A 1.8MB, because ES5 bundle is always loaded first.

B 3.0MB, because both bundles are loaded together.

C 1.2MB, because modern browsers load the ES2015 bundle only.

D 0MB, because differential loading disables main bundles.

💡 Hint

Modern browsers load only the ES2015 bundle, not the ES5 one.

Differential loading serves smaller ES2015 bundles to modern browsers, reducing bundle size and improving performance.

Practice

1. What is the main purpose of bundle size analysis in Angular applications?

easy

A. To change the app's color scheme

B. To add more features to the Angular app

C. To find which parts of the app make the bundle large

D. To increase the app's loading time

Solution

1. Step 1: Understand bundle size analysis goal

   Bundle size analysis helps identify what parts of the app increase the size of the final build.

2. Step 2: Match purpose with options

   Only To find which parts of the app make the bundle large correctly states the purpose as finding large parts in the bundle.

3. Final Answer:

   To find which parts of the app make the bundle large -> Option C

4. Quick Check:

   Bundle size analysis = find large parts [OK]

Hint: Think: Why check bundle size? To find big parts [OK]

Common Mistakes:

• Confusing bundle size analysis with adding features
• Thinking it changes app appearance
• Assuming it slows down the app

2. Which Angular CLI command generates a JSON file useful for bundle size analysis?

easy

A. ng build --stats-json

B. ng serve --stats-json

C. ng test --stats-json

D. ng lint --stats-json

Solution

1. Step 1: Recall Angular CLI commands for building

   The command to build the app and generate stats is ng build --stats-json.

2. Step 2: Identify correct option

   ng build --stats-json matches the correct command to create the JSON file for bundle analysis.

3. Final Answer:

   ng build --stats-json -> Option A

4. Quick Check:

   Build with stats JSON = ng build --stats-json [OK]

Hint: Build command with --stats-json creates analysis file [OK]

Common Mistakes:

• Using ng serve instead of ng build
• Confusing test or lint commands with build
• Forgetting to add --stats-json flag

3. After running ng build --stats-json, you use source-map-explorer on the generated JSON. What will you see?

medium

A. A list of unused CSS styles

B. A list of errors in your Angular code

C. A report of unit test results

D. A visual map showing which files contribute most to bundle size

Solution

1. Step 1: Understand what source-map-explorer does

   This tool shows a visual breakdown of the bundle, highlighting file sizes.

2. Step 2: Match output with options

   A visual map showing which files contribute most to bundle size correctly describes the visual map of file size contributions.

3. Final Answer:

   A visual map showing which files contribute most to bundle size -> Option D

4. Quick Check:

   source-map-explorer output = visual size map [OK]

Hint: source-map-explorer shows visual file size map [OK]

Common Mistakes:

• Thinking it shows code errors
• Confusing with test reports
• Expecting CSS style reports

4. You ran ng build --stats-json but source-map-explorer shows no data. What is the likely cause?

medium

A. You did not generate the stats JSON file during build

B. You forgot to install source-map-explorer globally

C. You ran ng serve instead of ng build

D. Your Angular app has no components

Solution

1. Step 1: Check if stats JSON file was created

   source-map-explorer needs the stats JSON file generated by ng build --stats-json.

2. Step 2: Identify missing stats JSON as cause

   If the file is missing, source-map-explorer shows no data. This matches You did not generate the stats JSON file during build.

3. Final Answer:

   You did not generate the stats JSON file during build -> Option A

4. Quick Check:

   No stats JSON = no data in explorer [OK]

Hint: Check if stats JSON file exists before using explorer [OK]

Common Mistakes:

• Assuming source-map-explorer must be global
• Confusing ng serve with ng build
• Thinking app components affect stats generation

5. You notice your Angular bundle is very large. Which combination of actions will best reduce the bundle size?

hard

A. Disable Ahead-of-Time compilation and enable source maps

B. Use lazy loading for modules and remove unused imports

C. Add more third-party libraries and increase polyfills

D. Increase the number of components and services

Solution

1. Step 1: Identify techniques to reduce bundle size

   Lazy loading loads modules only when needed, and removing unused imports cuts unnecessary code.

2. Step 2: Evaluate options for reducing size

   Use lazy loading for modules and remove unused imports correctly combines these effective methods. Other options add size or disable optimizations.

3. Final Answer:

   Use lazy loading for modules and remove unused imports -> Option B

4. Quick Check:

   Lazy loading + clean imports = smaller bundle [OK]

Hint: Lazy load and clean imports to shrink bundle [OK]

Common Mistakes:

• Adding more libraries increases size
• Disabling AOT slows app and increases size
• Adding components without optimization