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

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"
       }
    ]

预算是什么意思？

绩效预算是对某些值的一组限制， 影响现场性能，在设计中不得超过 任何网络项目的开发。

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

另见：

• https://github.com/webpack/webpack/issues/3216
• https://angular.io/guide/build#configure-size-budgets
• Performance Budgets (Keep Request Counts Low And File Sizes Small)

Answer 2

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

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

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

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

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

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

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

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

一般来说，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 包的组成。

得到这张图非常容易。

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：How Did Angular CLI Budgets Save My Day And How They Can Save Yours

参考 2：Optimize Angular bundle size in 4 steps

Answer 3

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

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

Answer 4

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

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

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