使用 --prod 构建我的 Angular 7 项目时，我在 budgets 中收到警告。

我有一个 Angular 7 项目。我正在尝试构建它，但我不断收到以下警告:

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

这些是 block 的详细信息:

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]

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

最佳答案

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

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

另见:

• 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)

https://stackoverflow.com/questions/53995948/