61

我正在使用 Angular CLI 来使用--prodswitch 构建一个用于生产的应用程序。捆绑包是在​​dist目录中创建的。有没有办法知道在 tree-shacking 和所有其他步骤之后实际将哪些类和函数放入包中？

4

4 回答 4

118

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

  • 修改你的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预算来监控你的包大小。

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

  • ng 添加@ngx-builders/analyze
  • npm i 源地图探索 -g
  • ng 运行 [YOUR_PROJECT_NAME]:analyze

更新：
如果您现在使用的是nx 控制台（又名角度控制台），它现在具有内置的捆绑分析功能，还请记住，stats.json@Klaster_1 在评论中声明的每个项目的路径可能不同。

于 2017-10-04T23:30:51.897 回答
14

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-07-15T14:44:35.110 回答
10

编辑 [2020-06-08]

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

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

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

旧答案

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

  • 安装 Nrwl 技术的 vscode 扩展“Angular Console”。
  • 可选：如果您没有，请将您的工作区变成一个 nrwl-nx-workspace ng add @nrwl/schematics（这只是一个扩展的角度工作区，但它也适用于默认的角度工作区）。
  • 转到Projects > 选择您要构建的应用程序并使用aot和production运行构建命令。

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

在此处输入图像描述

于 2019-04-01T14:05:58.913 回答
1

按照以下步骤将 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
于 2021-07-20T19:27:01.030 回答