Angular CLI输出 - 如何分析bundle文件

Question

我正在使用Angular CLI使用--prod开关构建用于生产的应用。 捆绑包在 dist 目录中创建。 有没有办法知道哪些类和函数在树形图形和其他所有步骤之后实际放入了包中？

Answer 1

您可以使用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它只是一个简单的角度应用，它演示了如何实现延迟加载，并且已经设置了webpack-bundle-analyzer，如上所述。

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

更新：
如果您现在使用angular console，则内置bundle analyzing feature

Answer 2

2020角队推荐

角度小组强烈建议，仅使用 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

请记住，您可以使用源地图文件。

侧面注意：我个人使用webpack-bundle-analyzer已有很长时间了。但是从现在开始使用source-map-explorer。

Answer 3

自Angular console 7.4起，有一种新方法可以分析您的Angular束。

• 安装Nrwl技术的vscode扩展“ Angular Console”。
• 可选：如果没有，请使用ng add @nrwl/schematics将工作空间转换为nrwl-nx-workspace（这只是扩展的角度工作空间，但它也适用于默认的角度工作空间）。
• 转到项目>选择要构建的应用，然后使用 aot 和 production 运行构建命令。

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

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",
    - Run `npm run build-analyze`