Angular - 错误：初始超出最大预算。预算 5.00 MB 未达到 197.06 kB，总计 5.19 MB

Question

当我构建 Angular 12 项目时，出现以下错误：

错误：初始超出最大预算。预算 5.00 MB 未达到 197.06 kB，总计 5.19 MB

我的 angular.json：

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

但我仍然有错误。

我该如何解决这个问题？

感谢。

Answer 1

您的预算为 5MB，但您的捆绑包大小大于该预算 (5.19MB)，这导致了此错误。您需要按如下方式增加maximumError预算angular.json：

            {
              "type": "initial",
              "maximumWarning": "4mb",
              "maximumError": "6mb"
            },

您还可以遵循一些技巧来尽可能减小捆绑包的大小：

• 使用ng build --prod --build-optimizer。ng build --prod对于较新的版本，默认情况下使用或完成此操作ng build
• 使用模块lazy loading并尽可能模块化您的应用程序。
• 您还可以使用 Ivy 渲染引擎，它提供更好的包大小
• 确保您的第 3 方依赖项是可摇动的。
• 使用第三方工具来webpack-bundle-analyzer查看导致模块膨胀的原因
• 您还可以检查文件是否经过 gzip 压缩

Answer 2

我认为您需要在 CLI 配置文件angular.json.

{
  ...
  "configurations": {
    "production": {
      ...
      budgets: [
        {
          "type": "initial",
          "maximumWarning": "4mb",
          "maximumError": "5mb" // <==== change this number because your app is 5.19 MB now.
        }
      ]
    }
  }
}

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