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

记得准备好源地图：可以通过ng build --prod --sourceMap=true构建获得

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

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

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

• npm run analyze

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

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

更新：
也可以使用@ngx-builders/analyze：

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

更新：
如果您现在使用的是nx console (aka angular console)，它现在内置了bundle analyzing feature，还要记住stats.jsonpath 对于@Klaster_1 在cmets 中声明的每个项目可能不同。

Answer 2

编辑 [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 工作区）。
• 转到 Projects > 选择您要构建的应用，然后使用 aot 和 production 运行构建命令。

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

Answer 3

2020 Angular 团队推荐

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。

Answer 4

按照以下步骤将 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