性能预算：在CI/CD中强制执行速度
性能预算：为您的网站设定速度限制
性能预算是您对网站资源设定的一组限制。它就像是代码的速度限制。您决定您的JavaScript包不能超过200KB，您的图片总量不能超过1MB，并且您的页面必须在2秒内加载完成。这些限制有助于您的网站在成长过程中保持快速。
为什么需要预算
没有预算，性能往往会随着时间的推移而下降。有人添加了一个新库，然后又添加一个，接着是一张大图，再然后是第三方脚本。每个添加本身看起来很小，但加在一起就会拖慢网站。预算可以在这些添加成为问题之前就发现它们。
预算还能就什么是可接受的建立共识。当开发人员想要添加一个新库时，他们可以检查它是否在预算之内。如果不在，他们需要找一个更小的替代方案或者优化其他东西。这可以防止臃肿的缓慢蔓延。
预算应该涵盖什么
从影响最大的资源开始：JavaScript的总大小、CSS的总大小、图片的总大小以及总请求数。这些都直接影响页面加载速度。您也可以为特定指标设定预算：最大内容绘制（LCP）在2.5秒以内，首次输入延迟（FID）在100毫秒以内，累积布局偏移（CLS）在0.1以内。
更高级的预算可能包括第三方请求的数量、网页字体的大小或页面加载时执行的JavaScript数量。关键在于衡量对用户重要的内容并相应设定限制。
执行预算
预算只有被强制执行才有用。最好的方式是将其集成到您的CI流水线中。当有人提交拉取请求时，CI会检查这些更改是否会超出预算。如果会，构建就会失败。像Lighthouse CI、bundlesize和webpack的性能提示等工具可以实现自动化。
这会创建一个反馈循环：开发人员可以立即看到他们的更改带来的影响，并在合并前进行调整。久而久之，这将建立起一种性能意识文化。
设定现实的目标
首先测量您当前的性能。您现在处于什么位置？然后设定一个既有野心又可实现的目标。一个常见的起点是争取30%的改进。一旦达到，再设定一个新目标。目标是逐步、可持续的改进，而不是一次性的优化。
对于典型的内容网站，一个合理的预算可能是：200KB的JavaScript（压缩后），100KB的CSS，1MB的图片，以及少于20个请求。对于更复杂的Web应用程序，数字可能会更高。重要的是设定预算，坚持下去，并定期审查。