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?
UPDATE 2024 (v17 and above) 🎉
In case you are using the latest Angular (Vite set by default from Angular v17) then you have to try esbuild analyze (official) or esbuild-visualizer to inspect your bundle size.
You need to enable the statsJson option in angular.json. Then you will have a stats.json in your dist folder.
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"statsJson": true,
...
}
}
UPDATE 2020 (v16 and below):
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 --source-map. However since v12 you don't really need to pass--prodflag
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:
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.