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

当使用--prod构建angular 7项目时，我在预算中有一个警告

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

---

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

打开angular.json文件并查找

预算

关键字

它应该是这样的：

“预算”：[
{
“类型”：“首字母”，
“最大警告”：“2mb”，
“最大错误”：“5mb”
}
]

正如您可能猜到的，您可以增加

maximumWarning

值来防止此警告，即：

“预算”：[
{
“类型”：“首字母”，
“maximumWarning”：“4mb”，什么是角度CLI预算？
预算是Angular CLI的一个鲜为人知的特性。这是一个相当小但非常整洁的特性

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

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

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

从实用的角度考虑，只有为生产构建定义预算才有意义。Prod build在应用了所有优化（如树抖动和代码最小化）后，创建了具有“真实大小”的捆绑包

哎呀，一个构建错误！超过了最大捆绑大小。这是一个很好的信号，告诉我们出了什么问题

我们可能在我们的功能中进行了实验，但没有正确地清理
我们的工具可能出错并执行错误的自动导入，或者我们从建议的导入列表中选择错误项
我们可能会在不适当的位置从惰性模块导入内容
我们的新功能非常庞大，不适合现有预算
第一种方法：您的文件是否已压缩？

一般来说，gzip文件只有原始文件大小的20%左右，这可以大大缩短应用程序的初始加载时间。
要检查是否已gzip文件，只需打开开发人员控制台的“网络”选项卡。在“响应标题”中，如果您看到“内容编码：gzip”，就可以开始了

如何进行gzip？
如果你在大多数云平台或CDN中托管Angular应用程序，你不应该担心这个问题，因为他们可能已经为你处理了这个问题。但是，如果你有自己的服务器（如NodeJS+expressJS）为你的Angular应用程序服务，一定要检查这些文件是否已gzip。
下面是一个在NodeJS+expressJS应用程序中gzip静态资产的示例。你很难想象这个死气沉沉的简单中间件“压缩”会将包大小从2.21MB减少到495.13KB

const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())

第二种方法：：分析角度束

如果您的包太大，您可能需要分析您的包，因为您可能使用了不合适的大型第三方包，或者您忘记删除一些包（如果您不再使用）。Webpack具有一个惊人的功能，可以让我们直观地了解Webpack包的组成


这张图非常容易得到

npm安装-g网页包包分析器
在Angular应用程序中，运行
ng build--stats json
（不要使用标志
--prod
）。通过启用
--stats json
，您将获得一个额外的文件stats.json
最后，运行
webpack bundle analyzer./dist/stats.json
，您的浏览器将在localhost:8888弹出页面。玩得开心
参考文献1：

参考文献2:
你能解释一下预算是什么意思吗？@StackOverflow AddedHanks@yurzui为你快速回答，这是angular 7中的新功能吗？我们在angular 5中没有看到这个错误。这是否意味着我们做错了什么？@StackOverflow是在
angular中添加的/cli@7
另请参见ng7的新增功能
对于v7，我们也是默认的正在创建新项目以利用CLI中的捆绑预算。
如何优化以减少使用的预算大小？与其增加预算大小，不如尝试在资源中压缩图像，而不要编辑angular.jsonfile@Ahsan我就是这么做的。还是一样的消息。不确定是关于资产的。@Wee我的新答案，并检查链接您在nodejs项目中使用qzip，请参见，对于angular项目，您只需在build命令上启用qzip即可运行分析器，而无需全局安装包：
npx webpack bundle analyzer./dist/stats.json
在angular 9中，命令是
ng build--statsJson=true
。请您详细说明为什么要删除
--来自stats json的prod
？这比你付钱就能得到的知识还要多，非常感谢