预算警告，初始最大值已超出。

Question

使用 --prod 参数构建我的 Angular 7 项目时，budgets 报了一个警告。

我有一个 Angular 7 项目。我试图构建它，但我一直收到以下警告：

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

这些是块的详细信息：

chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB  [rendered]
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered]
chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] [rendered]
chunk {3} styles.33b11ad61bf10bb992bb.css (styles) 379 kB [initial] [rendered]

预算究竟是什么？我应该如何管理它们？

- Masoud Bimmar

---

尝试在资源中压缩图像，而不是编辑 angular.json 文件。 - Muhammad Ahsan

@Ahsan 这就是我所做的。仍然是相同的信息。不确定关于资产。 - Emeric

@Curse，看看我的新答案并检查链接。 - Masoud Bimmar

Answer 1

打开 angular.json 文件，查找 budgets 关键字。

它应该看起来像：

    "budgets": [
       {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
       }
    ]

你可能已经猜到了，你可以增加maximumWarning的值来防止此警告，例如：

    "budgets": [
       {
          "type": "initial",
          "maximumWarning": "4mb", <===
          "maximumError": "5mb"
       }
    ]

什么是预算?

性能预算是一组限制某些值的集合，这些值影响网站的性能，在任何web项目的设计和开发中都不得超过。

在我们的情况下，预算是bundle大小的限制。

另请参见：

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• 性能预算（保持请求计数和文件大小低）

- yurzui

---

@StackOverflow 已添加。 - yurzui

感谢@yurzui的快速回答，这是Angular 7的新功能吗？我们在Angular 5中没有看到这个错误。这是否意味着我们做错了什么？ - Stack Overflow

@StackOverflow 是在 @angular/cli@7 中添加的。在这里查看有关 ng7 的新功能：https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c 。使用 v7，我们还默认新项目充分利用我们的 CLI 中的 Bundle Budgets。 - yurzui

如何进行优化以减小使用预算的规模？而不是增加它… - Hassan Faghihi

@deadManN 我猜你可以避免引入整个npm包只为了调用一个方法，或者寻找更轻量级的替代方案，或者自己实现所需部分的逻辑。 - Mauricio Gracia Gutierrez

Answer 2

什么是Angular CLI预算？ Budgets是Angular CLI中不太知名但非常实用的功能之一。

随着应用程序在功能上的不断增长，其大小也会增加。 预算是Angular CLI中的一个功能，允许您在配置中设置预算阈值，以确保您设置的应用程序部分保持在界限内 — 官方文档

换句话说，我们可以将Angular应用程序描述为由构建过程生成的编译后的JavaScript文件集合，称为捆绑包。 Angular预算允许我们配置这些捆绑包的期望大小。 更重要的是，如果捆绑包大小过于庞大，我们甚至可以配置触发警告或失败构建错误的阈值！

如何定义预算？ Angular预算在angular.json文件中定义。预算是每个项目定义的，这是有道理的，因为工作区中的每个应用程序都有不同的需求。

从实用的角度来看，只有为生产环境构建定义预算才有意义。 生产构建会在应用所有优化（例如摇树和代码最小化）之后创建“真实大小”的捆绑包。

糟糕了，出现了构建错误！超过了最大捆绑包大小。这是一个很好的信号，告诉我们出现了问题...

1. 我们可能在我们的功能中进行了实验并没有正确清理
2. 我们的工具可能出现问题并执行错误的自动导入，或者我们从建议的导入列表中选择了错误的项目
3. 我们可能会在不恰当的位置从惰性模块中导入东西
4. 我们的新功能非常大，无法适应现有的预算

第一种方法：您的文件是否已压缩？

一般来说，经过gzip压缩的文件仅具有原始文件大小的约20％，可以大大降低应用程序的初始加载时间。要检查文件是否已经被gzip压缩，请打开开发人员控制台的网络选项卡。在“响应标头”中，如果看到“Content-Encoding: gzip”，则表示已经完成。

如何进行gzip压缩？ 如果您将Angular应用程序托管在大多数云平台或CDN中，则不必担心此问题，因为它们可能已经为您处理了这个问题。但是，如果您拥有自己的服务器（例如NodeJS + ExpressJS）提供Angular应用程序服务，则一定要检查文件是否已经被压缩。以下是在NodeJS + ExpressJS应用程序中压缩静态资产的示例。很难想象这个非常简单的中间件“compression”会将您的捆绑包大小从2.21MB减少到495.13KB。

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

第二种方法：分析你的Angular打包文件

如果你的打包文件大小太大，你可能需要分析一下你的打包文件，因为你可能使用了一个不适当的大型第三方包，或者忘记删除一些不再使用的包。Webpack有一个惊人的功能，可以帮助我们直观地了解webpack打包文件的组成。

获取这个图形非常简单：

1. npm install -g webpack-bundle-analyzer
2. 在你的Angular应用中，运行 ng build --stats-json （不要使用 --prod 标志）。通过启用 --stats-json，你将得到一个额外的文件 stats.json
3. 最后，运行 webpack-bundle-analyzer ./dist/stats.json，你的浏览器将弹出页面 localhost:8888。尽情享受吧！

参考文献1：如何使用Angular CLI预算拯救我的一天以及如何拯救你的一天

参考文献2：四步优化Angular打包文件大小

- Masoud Bimmar

---

要在不全局安装软件包的情况下运行分析器，请执行以下命令：npx webpack-bundle-analyzer ./dist/stats.json。 - michel404

在Angular 9中，该命令为 ng build --statsJson=true。请参见Angular 9文档。 - wami

为什么要从统计的JSON文件中删除--prod？请详细说明。 - Rafis Ganeev

这比你付费获得的知识更多，非常感谢。 - shahnshah

@Mariah 如果它已被弃用，为什么不将其替换为 --configuration production？ - Rafis Ganeev

Answer 3

请打开 angular.json 文件并查找 budgets 关键字，然后增加/提高 maximumWarning, maximumError 的值，这样应该就可以解决问题了。

 "budgets": [
       {
          "type": "initial",
          "maximumWarning": "8mb",
          "maximumError": "8mb"
       }
    ]

- Basavaraj SK

Answer 4

在我的情况下，我不得不像这样进行更改，因为接受的解决方案不起作用。我正在Angular中使用TensorFlow.js。

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", 
      "maximumError": "5mb"<=== instead! 
   }
]

- Jorge Guerra Pires

Answer 5

前往 angular.json 文件，在 configurations->production->budgets 下，将 maximumWarning 和 maximumError 增加到大于当前显示的错误。

"configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "12mb",
              "maximumError": "12mb"
            }
          ]
        }
      }

我将其设为每个12MB，以消除编译器中的警告和错误信息。

- Sheikh Wahab Mahmood

Answer 6

"budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ]

我用了这个但它并没有起作用。然后我做了这个：

"budgets": [ { "type": "initial", "maximumWarning": "20mb", "maximumError": "25mb" }, { "type": "anyComponentStyle", "maximumWarning": "20mb", "maximumError": "25mb" } ]

- Sayan Atta

---

永久关闭警报不是好的做法，至少将它们设定在合理范围内。我想你不希望你的应用程序在编译器警告之前变成一个20MB的怪物。 - Ε Г И І И О

Answer 7

这解决了我的问题。

"budgets": [
   {
      "type": "initial",
      "maximumWarning": "4mb", 
      "maximumError": "5mb"<=== instead! 
   }
]

- Bittu