Angular CLI 输出——如何分析包文件

Question

我正在使用 Angular CLI 通过 --prod 开关构建一个用于生产的应用程序。该包在 dist 目录中创建。有没有办法知道在 tree-shacking 和所有其他步骤之后哪些类和函数实际上已放入包中？

Answer 1

2020 年更新:

Angular 团队强烈建议仅使用source-map-explorer 来分析您的包大小，而不是webpack-bundle-analyzer。根据他们的说法，webpack-bundle-analyzer 和其他一些类似的工具没有提供与 Angular 构建过程相关的实际信息。

更多信息可以在 web.dev - https://youtu.be/B-lipaiZII8?t=215 找到

要全局安装 source-map-explorer:-

npm i -g source-map-explorer

或

yarn global add source-map-explorer

分析包大小:-

source-map-explorer dist/my-awesome-project/main.js

Remember to have source maps ready: they can be obtained by buildingwith ng build --prod --sourceMap=true. However since v12 you don't really need to pass --prod flag

---

原始答案:
您可以使用 webpack-bundle-analyzer检查您的包。

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

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

• npm 运行分析

您可以查看此 repo它只是一个简单的 Angular 应用程序，演示了如何实现延迟加载并且它有 webpack-bundle-analyzer已经如上设置。

您还可以配置 Angular CLI budgets监控您的 bundle 大小。

更新:
还有 @ngx-builders/analyze你可以这样做:

• 添加@ngx-builders/analyze
• npm i source-map-explore -g
• 运行 [YOUR_PROJECT_NAME]:analyze

更新:
如果您使用 nx console (aka angular console)现在它有 bundle analyzing feature内置还请记住，@Klaster_1 在评论中指出的每个项目的 stats.json路径可能不同。