问题
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-devmodify your
package.jsonscriptssection 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:
In case if you are using angular console now it has bundle analyzing feature built-in
回答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.
来源：https://stackoverflow.com/questions/46567781/angular-cli-output-how-to-analyze-bundle-files