Angular CLI output - how to analyze bundle files

问题:

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?

回答1:

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 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.

回答2:

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.