Angular CLI output - how to analyze bundle files

懵懂的女人 提交于 2019-12-20 11:11:49

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!