预算中的警告,最初超过最大值

Question

使用--prod构建我的角度7项目时,我在预算中有一个警告.

我有一个角度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]

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

Answer 1

打开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

Answer 2

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

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

换句话说，我们可以将Angular应用程序描述为一组由构建过程生成的称为bundle的已编译JavaScript文件。角度预算允许我们配置这些捆绑包的预期大小。更重要的是，如果捆绑包的大小过于失控，我们可以为要接收警告甚至无法构建的错误配置条件阈值！

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

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

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

1. 我们可能已经尝试过我们的功能，但未正确清理
2. 我们的工具可能会出错并执行错误的自动导入，或者我们从建议的导入列表中选择了不良项目
3. 我们可能会在不适当的位置从惰性模块导入内容
4. 我们的新功能非常强大，不适合现有预算

第一种方法：将文件压缩吗？

一般来说，压缩文件的大小仅为原始文件的20％，这可以大大减少应用程序的初始加载时间。要检查是否已压缩文件，只需打开开发者控制台的“网络”标签。在“响应标头”中，如果您应该看到“ Content-Encoding：gzip”，则可以使用。

如何gzip？ 如果您在大多数云平台或CDN中托管Angular应用，则不必担心此问题，因为它们可能已经为您解决了此问题。但是，如果您有自己的服务器（例如NodeJS + expressJS）为Angular应用程序提供服务，则一定要检查文件是否已压缩。以下是在NodeJS + expressJS应用中gzip静态资产的示例。您几乎无法想象，这种简单的中间件“压缩”功能会将捆绑包的大小从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（不要使用flag --prod）。通过启用，--stats-json您将获得一个附加文件stats.json
3. 最后，运行webpack-bundle-analyzer ./dist/stats.json，您的浏览器将在localhost：8888弹出页面。玩得开心。

ref 1：Angular CLI预算如何节省我的一天，以及如何节省你的一天

参考2：分4步优化Angular束的大小

Answer 3

就我而言，我必须这样改变，接受的解决方案不起作用。我在 Angular 中使用 TensorFlow.js。

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

Answer 4

请打开angular.json并检查budgets关键字，然后增加/提高这maximumWarning, maximumError应该可以解决问题

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

Answer 5

转到 angular.json 文件，在配置 -> 生产 -> 预算下，增加 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，以消除编译器发出的警告和错误消息。