Angular CLI输出 - 如何分析bundle文件
Pic*_*cci 25 angular-cli tree-shaking angular
我正在使用Angular CLI构建一个使用该--prod开关进行生产的应用程序.该包在dist目录中创建.有没有办法知道哪些类和函数在树形图形和所有其他步骤后实际放入了包中？
Kun*_*vič 46
您可以使用webpack-bundle-analyzer检查捆绑包.
npm install webpack-bundle-analyzer --save-dev修改你的
package.jsonscripts部分"analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"npm run analyze
你可以签出这个repo它只是一个简单的角度应用程序,它演示了如何实现延迟加载,并且它已经如上所述设置了webpack-bundle-analyzer.
您还可以配置Angular CLI 预算来监控捆绑包大小.
- 还需要 `--output-hashing=none` 才能让 main.js 没有哈希值 - 请添加到上面的命令 (3认同)
- 注意：每个项目的stats.json路径可能不同。 (2认同)
- 现在似乎是“--source-map=true”，而不是“--sourceMap=true”。 (2认同)
- @cmxl 和煤油检查更新的答案。 (2认同)
abh*_*thi 12
2020angular团队推荐
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 source-map-explorer
或者
yarn global add source-map-explorer
分析包大小：-
source-map-explorer dist/my-awesome-project/main.js
记住让你的源地图文件可用（可以通过构建获得ng build --prod --sourceMap=true）
旁注：我个人使用 webpack-bundle-analyzer 已经很长时间了。但是从现在开始 source-map-explorer。
- 请记住，首先您需要在启用源映射的情况下构建项目，例如“ng build --prod --sourceMap=true” (11认同)
从Angular控制台 7.4开始，有一种分析Angular包的新方法。
- 通过Nrwl技术安装vscode扩展名“ Angular Console”。
- 可选：如果没有，请使用（将其转换为nrwl-nx-workspace）
ng add @nrwl/schematics（这是扩展的角度工作空间，但也可以使用默认的角度工作空间）。 - 转到项目 >选择要构建的应用程序，然后使用aot和production运行build命令。
就是这样。输出如下。它包含捆绑软件的大小和捆绑软件的所有部分。您可以选择要分析的文件（main / polyfills / 1 / etc）。它将为每个文件显示该饼图。非常详细，易于使用。
| 归档时间： |
|
| 查看次数： |
7539 次 |
| 最近记录： |