什么是Angular CLI预算?
预算是Angular CLI中鲜为人知的特性之一。这是一个相当小但非常简洁的功能!
随着应用程序功能的增长，它们的大小也在增长。
预算是Angular CLI中的一个特性，它允许你在配置中设置预算阈值，以确保应用程序的某些部分不超出你设置的边界——官方文档
或者换句话说，我们可以把我们的Angular应用描述为一组编译好的JavaScript文件，称为包，它是由构建过程生成的。
Angular预算允许我们配置这些bundle的预期大小。更重要的是，当我们想要收到警告时，我们可以为条件配置阈值，甚至如果bundle大小太失控，我们就会生成错误而导致构建失败!
如何定义预算?
Angular的预算在Angular。json文件。预算是根据每个项目定义的，这是有意义的，因为工作区中的每个应用程序都有不同的需求。
从实际的角度考虑，为产品构建定义预算是有意义的。Prod构建在应用所有优化(如摇树和代码最小化)后创建具有“真实大小”的包。
哎呀，一个构建错误!超过了最大束大小。这是一个很好的信号，告诉我们有些事情出错了……
我们可能在我们的功能上做了实验，但没有正确地清理
我们的工具可能会出错并执行错误的自动导入，或者从建议的导入列表中选择错误的项
我们可能会在不合适的位置从惰性模块中导入东西
我们的新功能非常庞大，不符合现有的预算
第一种方法:你的文件压缩了吗?
一般来说，gzip文件的大小只有原始文件的20%左右，这可以大大减少应用程序的初始加载时间。
要检查你是否已经压缩了你的文件，只需打开开发人员控制台的网络选项卡。在“Response Headers”中，如果你应该看到“Content-Encoding: gzip”，你就可以开始了。
How to gzip?
If you host your Angular app in most of the cloud platforms or CDN, you should not worry about this issue as they probably have handled this for you. However, if you have your own server (such as NodeJS + expressJS) serving your Angular app, definitely check if the files are gzipped.
The following is an example to gzip your static assets in a NodeJS + expressJS app. You can hardly imagine this dead simple middleware “compression” would reduce your bundle size from 2.21MB to 495.13KB.
const compression = require('compression')
const express = require('express')
const app = express()
app.use(compression())
第二种方法:分析你的Angular bundle
如果你的包确实太大了，你可能需要分析你的包，因为你可能使用了一个不合适的大尺寸第三方包，或者你忘记删除一些你不再使用的包。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 bundle大小
