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
将您的 package.json scripts 部分修改为 "analyze": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
npm run analyze

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

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

更新：
同样使用 @ngx-builders/analyze 你可以这样做：

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

更新：
如果您使用的是 nx console (aka angular console) now it has bundle analyzing feature 内置，请记住，stats.json 路径对于@Klaster_1 在评论中声明的每个项目可能不同。

Answer 2

编辑[2020-06-08]

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

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

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

旧答案

自 Angular console 7.4 起，有一种分析 Angular 包的新方法。

安装 Nrwl technologies 的 vscode 扩展 "Angular Console"。
可选：如果您还没有，请将您的工作空间变成带有 ng add @nrwl/schematics 的 nrwl-nx-workspace（这只是一个扩展的 angular 工作空间，但它适用于默认的 angular 工作区。
转到 Projects > Select 您要构建的应用程序和运行使用 aot[=47= 的构建命令] 和生产.

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

Answer 3

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.

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

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

Angular CLI output - how to analyze bundle files

angular-cli

tree-shaking

angular

编辑[2020-06-08]

旧答案

2020angular团队推荐