预算中的警告，初始超出最大值

打开 angular.json 文件并找到 budgets 关键字。

它应该看起来像：

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

正如您可能已经猜到的那样，您可以增加 maximumWarning 值来防止出现此警告，即：

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

预算是什么意思？

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

在我们的案例中，预算是捆绑包大小的限制。

也可以看看：

https://github.com/webpack/webpack/issues/3216

https://angular.io/guide/build#configure-size-budgets

性能预算（保持低请求计数和小文件大小）

---

什么是 Angular CLI 预算？预算是 Angular CLI 中鲜为人知的功能之一。这是一个相当小但非常整洁的功能！

随着应用程序功能的增长，它们的大小也在增长。 Budgets 是 Angular CLI 中的一项功能，它允许您在配置中设置预算阈值，以确保应用程序的某些部分保持在您设置的边界内 — 官方文档

或者换句话说，我们可以将我们的 Angular 应用程序描述为一组已编译的 JavaScript 文件，称为捆绑包，由构建过程生成。 Angular 预算允许我们配置这些包的预期大小。更重要的是，当我们想要收到警告时，我们可以为条件配置阈值，或者如果捆绑包大小太失控，甚至会因错误而导致构建失败！

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

务实地思考，只有为生产构建定义预算才有意义。 Prod build 在应用所有优化（如摇树和代码最小化）后创建具有“真实大小”的包。

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

我们可能已经对我们的功能进行了试验并且没有正确清理我们的工具可能会出错并执行错误的自动导入，或者我们从建议的导入列表中选择了错误的项目我们可能会从不适当位置的惰性模块中导入东西我们的新功能真的很大，不适合现有预算

第一种方法：你的文件被压缩了吗？

一般来说，gzip 压缩文件的大小只有原始文件的 20% 左右，这可以大大减少应用程序的初始加载时间。要检查您是否已压缩文件，只需打开开发者控制台的网络选项卡。在“响应标头”中，如果您应该看到“Content-Encoding: gzip”，您就可以开始了。

如何压缩？如果您在大多数云平台或 CDN 中托管您的 Angular 应用程序，您不必担心这个问题，因为他们可能已经为您处理了这个问题。但是，如果您有自己的服务器（例如 NodeJS + expressJS）为您的 Angular 应用程序提供服务，请务必检查文件是否经过 gzip 压缩。以下是在 NodeJS + expressJS 应用程序中压缩静态资产的示例。你很难想象这个死气沉沉的简单中间件“压缩”会将你的包大小从 2.21MB 减少到 495.13KB。

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

第二种方法:: 分析你的 Angular 包

如果您的捆绑包确实变得太大，您可能需要分析您的捆绑包，因为您可能使用了不合适的大型第三方包，或者如果您不再使用它，您忘记删除某些包。 Webpack 有一个惊人的功能，可以让我们直观地了解 webpack 包的组成。

https://i.stack.imgur.com/CBS3C.png

得到这张图非常容易。

npm install -g webpack-bundle-analyzer 在您的 Angular 应用程序中，运行 ng build --stats-json（不要使用标志 --prod）。通过启用 --stats-json 你会得到一个额外的文件 stats.json 最后，运行 webpack-bundle-analyzer ./dist/stats.json 你的浏览器会弹出 localhost:8888 的页面。玩得开心。

参考 1：How Did Angular CLI Budgets Save My Day And How They Can Save Yours

参考 2：Optimize Angular bundle size in 4 steps

---

就我而言，我不得不像这样进行更改，接受的解决方案不起作用。我在 Angular 中使用 TensorFlow.js。

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

---

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

我用过这个，但它不起作用。然后我这样做了：

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

---