Lighthouse 性能预算

Lighthouse是一个审计工具，它测试站点在几个关键领域的性能、可访问性、最佳实践以及站点作为一个渐进式web应用程序的表现。

Lighthouse（v5+）的命令行版本支持基于以下内容设置性能预算：

resource size
resource count

您可以为以下任何资源类型设置预算：

document
font
image
media
other
script
stylesheet
third-party
total

预算是在JSON文件中设置的，在定义预算之后，新的“Over-Budget”列会告诉您是否超出了任何限制。

Webpack performance hints

Webpack是一个强大的构建工具，用于优化如何将代码交付给用户。它还支持根据资源大小设置性能预算。

在webpack.config.js中启用性能提示，当包大小超过限制时获取命令行警告或错误。在整个开发过程中，这是一个很好的方法来保持对资产规模的关注。

在构建步骤之后，webpack输出一个用颜色编码的资产列表及其大小。任何超出预算的项目都会以黄色突出显示。

资产和入口点的默认限制都是250KB。您可以在配置文件中设置自己的目标。

预算与未压缩资产规模进行比较。未压缩的JavaScript大小与执行时间有关，大文件可能需要很长时间才能执行，尤其是在移动设备上。

压缩资产的大小会影响传输时间，这在慢速网络中非常重要。

额外功能：webpack 不仅会警告你，还会给你一个如何缩小捆绑包的建议

Bundlesize

Bundlesize是一个简单的npm包，它根据您设置的阈值测试资产大小。它可以在本地运行并与CI集成。

Bundlesize CLI

通过指定阈值和要测试的文件来运行bundlesize CLI。

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize在一行中输出彩色编码的测试结果。

Bundlesize for CI

如果将bundlesize与CI集成以自动对请求强制执行大小限制，则可以从bundlesize中获得最大的价值。如果bundlesize测试失败，则不会合并该请求。它适用于使用Travis CI、CircleCI、Wercker、Drone、GitHub请求。

你现在可能有一个快速的应用程序，但添加新代码通常可以改变这一点。使用bundlesize检查拉请求将有助于避免性能下降。Bootstrap、Tinder、Trivago和其他许多公司都用它来控制预算。

使用bundlesize，可以分别为每个文件设置阈值。如果要在应用程序中拆分捆绑包，这一点尤其有用。

默认情况下，它测试gzip压缩的资产大小。您可以使用压缩选项切换到brotli压缩或完全关闭它。

Lighthouse Bot

lighthouse-ci(github.com/GoogleChrom…)与Travis CI集成，并根据Lighthouse五个审计类别中的任何一个实施预算。例如，你的Lighthouse性能得分预算为100。关注一个数字有时要比个人资产预算和Lighthouse得分考虑很多因素要简单得多。

在将站点部署到登台服务器后，lighthouse-ci将运行审核。在.travis.yml使用--perf、-a11y、-bp、-seo或--pwa选项为特定Lighthouse类别设置预算。目标是以至少90分的成绩留在绿区。

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

如果GitHub上的pull请求的分数低于您设置的阈值，Lighthouse Bot可以阻止pull请求被合并。⛔

lighthouse-ci然后用更新的分数评论你的拉请求。这是一个很好的特性，它鼓励在代码更改发生时讨论性能。

如果您发现您的pull请求被一个糟糕的Lighthouse分数阻止，请使用Lighthouse CLI或在Dev Tools中运行一个审计。它生成一个报告，其中包含瓶颈的详细信息和简单优化的提示。

将性能预算纳入构建过程(翻译)