Angular CLI 输出 如何分析Bundle 文件

UPDATE 2020:

angular团队建议strongly recommends只使用source-map-expl或er来分析包裹大小，而不是webpack-bundle-analyzer.根据他们的说法，webpack bundle analyzer和其他一些类似的工具并没有给出与Angular 构建过程相关的实际信息.

更多信息请拨打web.dev-https://youtu.be/B-lipaiZII8?t=215

要全局安装源 map 管理器，请执行以下操作:-

npm i -g source-map-expl或er

或

yarn global add source-map-expl或er

要分析Bundle 包大小，请执行以下操作:-

source-map-expl或er dist/my-awesome-project/main.js

记住要准备好源 map :它们可以通过构建ng build --prod --sourceMap=true来获得

ORIGINAL ANSWER:
You can use webpack-bundle-analyzer to inspect your bundles.

• npm install webpack-bundle-analyzer --save-dev

• 用"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"修改你的package.json scripts部分

• 一百

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 monit或 your bundles size.

UPDATE:
Also with @ngx-builders/analyze you can do:

• NG添加@NGX-builders/分析
• npm i source-map-expl或e -g
• ng run[你的项目名称]:分析

UPDATE:
In case if you are using nx console (aka angular console) now it has bundle analyzing feature built-in also bear in mind that stats.jsonpath might be different f或 each project stated by @Klaster_1 in comments.