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

Need a 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

Need a 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

Need a 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

Need a hint?

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