Analyzing Your Angular app JS bundles

Your production build gets heavier and heavier but you don’t really know why?

Let’s see how to analyze the JS bundles of your Angular applications.

Picture courtesy of Siora Photography

In this article, I’ll explain how to generate stat files for your Angular application as well as how to analyze those files using webpack-bundle-analyzer. Thanks to this, you’ll be able to quickly discover/understand what contributes the most to your bundle size and know where to put your energy to improve the situation.

Generating stats

To generate bundle stats, we will use webpack-bundle-analyzer. Go ahead and install it now:

npm install webpack-bundle-analyzer --save-dev

Next, add a script to generate the stats file, assuming that the target project is called “web”:

"webpack-analyzer:analyze:web:prod": "nx run web:build --prod --stats-json",

In this example, the project uses Nrwl NX’s nx run command (which provides a wrapper around NG CLI), but it works all the same with the Angular CLI:

"webpack-analyzer:analyze:web:prod": "ng run web:build:production --stats-json=true --statsJson=true"