Bundle size analysis in Angular

Introduction

Bundle size analysis helps you see how big your Angular app files are. Smaller bundles load faster and make users happy.

When your app feels slow to load in the browser.

Before releasing a new version to check if new code made the app bigger.

To find large libraries or code parts that can be removed or optimized.

When you want to improve your app's performance and user experience.

Syntax

Angular

ng build --stats-json

# Then use a tool like 'source-map-explorer' to analyze
npx source-map-explorer dist/project-name/main.*.js

Run ng build --stats-json to create a stats file for analysis.

Use tools like source-map-explorer or webpack-bundle-analyzer to visualize bundle contents.

Examples

This command builds your Angular app and creates a stats.json file in the dist/project-name folder.

Angular

ng build --stats-json

This command opens a visual report showing which files and libraries take up space in your main bundle.

Angular

npx source-map-explorer dist/my-app/main.*.js

Use this to start a server showing an interactive bundle size report from the stats file.

Angular

npm install -g webpack-bundle-analyzer
webpack-bundle-analyzer dist/my-app/stats.json

Sample Program

This example shows the commands you run in your terminal to generate and view the bundle size report.

You do not write code inside Angular files for this; it is a build and analysis step.

Angular

/* Steps to analyze bundle size in Angular */

// 1. Build the app with stats
// Run in terminal:
// ng build --stats-json

// 2. Analyze with source-map-explorer
// Run in terminal:
// npx source-map-explorer dist/my-app/main.*.js

// This opens a browser window showing bundle size breakdown.

Important Notes

Always analyze bundle size after adding new libraries to catch big increases early.

Lazy loading modules in Angular can reduce initial bundle size and improve load speed.

Use ng build --prod for production builds to get accurate bundle sizes with optimizations.

Summary

Bundle size analysis helps find what makes your Angular app big.

Use ng build --stats-json and tools like source-map-explorer to see details.

Smaller bundles mean faster loading and better user experience.