How to analyze your Angular build output?

Alain Chautard

3 min read

·

1 day ago

--

Listen

Share

Press enter or click to view image in full size

When we build an Angular application, the browser must download, parse, and interpret its JavaScript before rendering any component on the screen. This means that the smaller our code output, the faster the application loads.

How to optimize our build size? First, we can use lazy loading, which should be used by most Angular applications no matter what.

Second, we can look at what's inside our code output. Unwanted libraries can get imported and included by accident in your build. This article explains how to identify such libraries.

How to analyze our code output?

Here is how to get a bundle analysis:

1. Run ng build --stats-jsonin your project. This generates a stats filedist/your-project/stats.json
2. Open the esbuild Bundle Size Analyzer website and drop that stats.json into it. You get a treemap showing how much each dependency weighs in the initial bundle and in the lazy chunks. Everything stays local in the browser.

An alternative is to run the tool as a command-line option: npx source-map-explorer dist/your-project/browser/*.js, after a build with sourceMap: true.

In the browser, you would see your build output mapped as follows:

Press enter or click to view image in full size

You'll notice that most of that code comes from node_modules, which means it comes from the Angular framework or other dependencies. In the above picture, we can see a forms/signals.mjs being included. What if I'm not using Signal Forms at all? This means I might be importing Signal Forms features that aren't really needed.

Always remember that an ES import from node_modules means: "I need this code in my application". As a result, cleaning up unused imports is very important.

The map on the website is clickable. Here I clicked on the /src section to see how much of my source code makes up that build, and which components are the biggest:

Press enter or click to view image in full size

The bigger the rectangle, the more time we should spend looking at that source code to see if it could be simplified or refactored.

My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help development teams learn and become proficient with Angular / React / JavaScript.

If you need any help learning web technologies, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and YouTube video page.