什么是 Angular CLI 预算？
预算是 Angular CLI 中鲜为人知的功能之一。这是一个相当小但非常整洁的功能！
随着应用程序功能的增长，它们的大小也在增长。Budgets 是 Angular CLI 中的一项功能，它允许您在配置中设置预算阈值，以确保应用程序的某些部分保持在您设置的边界内—官方文档
或者换句话说，我们可以将我们的 Angular 应用程序描述为一组已编译的 JavaScript 文件，称为捆绑包，由构建过程生成。Angular 预算允许我们配置这些包的预期大小。更重要的是，当我们想要收到警告时，我们可以为条件配置阈值，或者如果捆绑包大小太失控，甚至会因错误而导致构建失败！
如何定义预算？
Angular 预算在 angular.json 文件中定义。每个项目都定义了预算，这是有道理的，因为工作区中的每个应用程序都有不同的需求。
务实地思考，只有为生产构建定义预算才有意义。Prod build 在应用所有优化（如摇树和代码最小化）后创建具有“真实大小”的包。
糟糕，构建错误！超出了最大捆绑包大小。这是一个很好的信号，告诉我们出了点问题……</p>
- 我们可能已经尝试了我们的功能并且没有正确清理
- 我们的工具可能会出错并执行错误的自动导入，或者我们从建议的导入列表中选择错误的项目
- 我们可能会在不适当的位置从惰性模块中导入东西
- 我们的新功能非常大，不适合现有预算
第一种方法：你的文件被压缩了吗？
一般来说，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 包的组成。
得到这张图非常容易。
npm install -g webpack-bundle-analyzer- 在您的 Angular 应用程序中，运行
ng build --stats-json（不要使用 flag --prod）。通过启用--stats-json，您将获得一个额外的文件 stats.json
- 最后，运行
webpack-bundle-analyzer ./dist/stats.json，你的浏览器会弹出 localhost:8888 的页面。玩得开心。
参考 1：Angular CLI 预算如何节省我的时间以及他们如何节省您的时间
参考 2：分 4 步优化 Angular 包大小