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.