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

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.