Angular CLI output – how to analyze bundle files

angularangular-clitree-shaking

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 which classes and functions have been actually put in the bundle after tree-shacking and all other steps?

Best Answer

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 bundle size :-

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

Remember to have source maps ready: they can be obtained by building with ng build --prod --sourceMap=true

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.

Related Topic