Angular CLI output - how to analyze bundle files

Question

I am using Angular CLI to build an app for production using the --prod switch. The bundle is created in the dist directory. Is there a way to know

Answer 1

2020 angular team recommendation

The angular team strongly recommends to only use source-map-explorer to analyze your bundle size instead of webpack-bundle-analyzer. According to them, webpack-bundle-analyzer and a few other similar tools doesn't give the actual info pertaining to angular build process.

More info can be found at web.dev - https://youtu.be/B-lipaiZII8?t=215

To install source-map-explorer globally:-

npm i source-map-explorer

or

yarn global add source-map-explorer

To analyze bunndle size :-

source-map-explorer dist/my-awesome-project/main.js

Remember to have your source map files available.

SIDE NOTE: I have personally used webpack-bundle-analyzer for quite a long time. But from now on source-map-explorer.

Answer 2

UPDATE 2020:

The angular team strongly recommends to only use source-map-explorer to analyze your bundle size instead of webpack-bundle-analyzer. According to them, webpack-bundle-analyzer and a few other similar tools doesn't give the actual info pertaining to angular build process.

More info can be fount at web.dev - https://youtu.be/B-lipaiZII8?t=215

To install source-map-explorer globally:-

npm i -g source-map-explorer

or

yarn global add source-map-explorer

To analyze bunndle size :-

source-map-explorer dist/my-awesome-project/main.js

ORIGINAL ANSWER:
You can use webpack-bundle-analyzer to inspect your bundles.

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

• modify your package.json scripts section with "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

• npm run analyze

You can checkout this repo it is just a simple angular app that demonstrates how to implement lazy loading and it has webpack-bundle-analyzer already setup as above.

Also you can configure Angular CLI budgets to monitor your bundles size.

UPDATE:
Also with @ngx-builders/analyze you can do:

• ng add @ngx-builders/analyze
• npm i source-map-explore -g
• ng run [YOUR_PROJECT_NAME]:analyze

UPDATE:
In case if you are using nx console (aka angular console) now it has bundle analyzing feature built-in also bear in mind that stats.jsonpath might be different for each project stated by @Klaster_1 in comments.

Answer 3

Edit [2020-06-08]

The Angular Console has been renamed to Nx Console. When you go to the console in VSCode you can run the build command with the statsJson option enabled. This generates, depending on your TypeScript configuration, some stats-es*.json files into the build directory alongside the compiled stuff. These you can use with the webpack-bundle-analyzer (as mentioned in the accepted answer)

npx webpack-bundle-analyzer ./pathto/stats-es2015.json

adjust the EcmaScript number according to your settings.

Old Answer

Since Angular console 7.4, there is a new way analyzing your Angular bundles.

• Install the vscode extension "Angular Console" by Nrwl technologies.
• Optional: If you haven't, turn your workspace into an nrwl-nx-workspace with ng add @nrwl/schematics (this is just an extended angular workspace, but it works with the default angular workspace, too).
• Go to Projects > Select the app you want to build and run the build command with aot and production.

And that's it. The output is the following. It contains the bundle size and all parts of the bundle. You can select the file you want to analyze (main/polyfills/1/etc). It will display that pie for each of that files. Pretty detailed and easy to use.