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

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]

预算到底是什么？我该如何管理它们？

Answer 1

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

它应该看起来像：

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

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

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

预算是什么意思？

A performance budget is a group of limits to certain values that affect site performance, that may not be exceeded in the design and development of any web project.

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

另请参阅：

Answer 2

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

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

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

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

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

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

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

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

一般来说，gzip 文件只有原始文件大小的 20% 左右，这可以大大减少应用程序的初始加载时间。要检查您是否对文件进行了 gzip 压缩，只需打开开发人员控制台的网络选项卡。在“Response Headers”中，如果您应该看到“Content-Encoding: 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 包的组成。

得到这张图超级容易。

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

Answer 3

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

我用过这个，但没用。然后我这样做了：

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

Answer 4

在我的情况下，我不得不这样改变，接受的解决方案不起作用。我在 Angular.

中使用 TensorFlow.js

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

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

WARNING in budgets, maximum exceeded for initial

production

build

angular

ng-build

预算是什么意思？