Angular CLI 输出 - 如何分析捆绑文件

2020 年更新：

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

更多信息请访问 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

请记住准备好源地图：它们可以通过使用 ng build --prod --sourceMap=true 构建来获得

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

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

使用“analyze”修改您的 package.json 脚本部分：“ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json”

npm 运行分析

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

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

更新：
您还可以使用 @ngx-builders/analyze 执行以下操作：

ng 添加@ngx-builders/analyze

npm i 源地图探索 -g

ng 运行 [YOUR_PROJECT_NAME]:analyze

更新：
如果您现在使用的是 nx console (aka angular console)，则它已内置 bundle analyzing feature，还请记住，stats.json@Klaster_1 在中声明的每个项目的路径可能不同注释。

---

2020 Angular 团队推荐

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

更多信息请访问 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。

---

编辑 [2020-06-08]

Angular 控制台已重命名为 Nx Console。当您在 VSCode 中转到控制台时，您可以在启用 statsJson 选项的情况下运行 build 命令。这会根据您的 TypeScript 配置生成一些 stats-es*.json 文件到编译目录旁边的构建目录中。这些您可以与 webpack-bundle-analyzer 一起使用（如接受的答案中所述）

npx webpack-bundle-analyzer ./pathto/stats-es2015.json

根据您的设置调整 EcmaScript 编号。

旧答案

从 Angular console 7.4 开始，有一种分析 Angular 包的新方法。

安装 Nrwl 技术的 vscode 扩展“Angular Console”。

可选：如果您还没有，请使用 ng add @nrwl/schematics 将您的工作区变成一个 nrwl-nx-workspace（这只是一个扩展的 angular 工作区，但它也适用于默认的 angular 工作区）。

转到项目 > 选择您要构建的应用程序并使用 aot 和生产运行构建命令。

就是这样。输出如下。它包含捆绑包大小和捆绑包的所有部分。您可以选择要分析的文件（main/polyfills/1/etc）。它将显示每个文件的饼图。非常详细且易于使用。

https://i.stack.imgur.com/zdNOf.png

---

按照以下步骤将 webpack 代码分析器添加到您的 Angular 应用程序

    - cd into your angular app
    > npm install --save-dev webpack-bundle-analyzer
    - Add below lines to script block of package.json
      "build:stats": "ng build --stats-json",
      "analyze": "webpack-bundle-analyzer dist/stats.json" ,
      "build-analyze": "npm run build:stats && npm run analyze",
    > npm run build-analyze

---