Bundle size analysis in Angular - Mini Project: Build & Apply

Bundle Size Analysis in Angular

📖 Scenario: You are working on an Angular project and want to understand how to analyze the size of your app's JavaScript bundles. This helps you find out which parts of your app make the bundle bigger and how to optimize loading speed.

🎯 Goal: Learn how to generate and read a bundle size report in Angular using the Angular CLI. You will create a simple Angular component, configure the build to produce a stats file, and then analyze the bundle size report.

📋 What You'll Learn

Create a new Angular component named bundle-analyzer with a simple template

Add a configuration variable to enable stats JSON generation during build

Run the Angular build command with stats generation enabled

Add a script or command to analyze the generated bundle stats

💡 Why This Matters

🌍 Real World

Bundle size analysis helps developers understand what parts of their Angular app make the app large. This knowledge is useful to optimize loading speed and user experience.

💼 Career

Many frontend developer roles require knowledge of build optimization and bundle size analysis to deliver fast and efficient web applications.

1

Create a simple Angular component

Create a new Angular component named bundle-analyzer with a template that contains a <p> tag showing the text Bundle Size Analysis Component.

Angular

// Create the bundle-analyzer component with the specified template
// Your code here

Hint

Use the @Component decorator with selector and template properties. Export a class named BundleAnalyzerComponent.

2

Add build configuration to generate stats JSON

In your Angular project's angular.json file, add or update the build options to include statsJson: true under architect > build > options.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-bundle-analyzer',
  template: `Bundle Size Analysis Component`
})
export class BundleAnalyzerComponent {}

// Add "statsJson: true" to angular.json build options
// Your code here

Hint

Open angular.json and find the build options section. Add "statsJson": true inside the options object.

3

Build the Angular project to generate stats file

Run the Angular build command ng build --configuration production in your terminal to create the production build and generate the stats.json file.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-bundle-analyzer',
  template: `Bundle Size Analysis Component`
})
export class BundleAnalyzerComponent {}

// Run the build command with production configuration to generate stats.json
// Your code here

Hint

Use the Angular CLI command ng build --configuration production to build the app and create the stats file.

4

Analyze the generated bundle stats

Add a script in your package.json named analyze that runs npx webpack-bundle-analyzer dist/your-project/stats.json to open a visual bundle size report. Replace your-project with your actual project folder name.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-bundle-analyzer',
  template: `Bundle Size Analysis Component`
})
export class BundleAnalyzerComponent {}

// Add an "analyze" script in package.json to run webpack-bundle-analyzer on the stats.json file
// Your code here

Hint

Open package.json and add a new script named analyze that runs npx webpack-bundle-analyzer on your stats.json file.

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