确定性能预算后,就该设置构建流程来跟踪预算了。有许多工具可让您为所选性能指标定义阈值,并在超出预算时向您发出警告。了解如何选择最适合您的需求和当前设置的方案。🕵?️ ❗️
Lighthouse 性能预算
Lighthouse 是一种审核工具,可以从几个关键方面测试网站:性能、无障碍功能、最佳做法,以及您的网站作为渐进式 Web 应用的性能。
Lighthouse (v5+) 的命令行版本支持根据以下条件设置性能预算:
- 资源大小
- 资源数量
您可以为以下任何资源类型设置预算:
document
font
image
media
other
script
stylesheet
third-party
total
预算是在 JSON 文件中设置的,定义预算后,新的“超出预算”列将告诉您是否超出任何限制。
![Lighthouse 报告中的“预算”部分](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=5&hl=cs)
Webpack 性能提示
Webpack 是一款强大的构建工具,用于优化向用户分发代码的方式。它还支持根据素材资源大小设置性能预算。
开启 webpack.config.js
中的性能提示,以便在软件包大小超出上限时收到命令行警告或错误。这是一种在开发过程中随时留意素材资源尺寸的好方法。
构建步骤完成后,webpack 会输出一个以颜色标示的资源及其大小列表。超出预算的所有金额都会以黄色突出显示。
![突出显示 bundle.js 的 Webpack 输出](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=5&hl=cs)
资源和入口点的默认上限为 250 KB。您可以在配置文件中设置自己的目标。
![Webpack 软件包大小警告](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=5&hl=cs)
系统会将预算与未压缩的素材资源大小进行比较。未压缩的 JavaScript 大小与执行时间有关,因此执行大文件可能需要很长时间,尤其是在移动设备上。
![Webpack 性能优化建议](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=5&hl=cs)
套装大小
Bundlesize 是一个简单的 npm 软件包,可以根据您设置的阈值测试资产大小。它可以在本地运行,并可与您的 CI 集成。
Bundlesize CLI
指定阈值和要测试的文件,运行 bundlesize CLI。
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize 会将以不同颜色标示的测试结果输出到一行中。
![bundlesize CLI 测试失败](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=5&hl=cs)
![通过 bundlesize CLI 测试](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=5&hl=cs)
适用于持续集成的 Bundlesize
如果将 bundlesize 与 CI 集成以自动对拉取请求施加大小限制,则可以充分利用 bundlesize。如果 bundlesize 测试失败,该拉取请求将不会合并。它适用于 GitHub 上的 Travis CI、CircleCI、Wercker 和 Drone 的拉取请求。
![GitHub 上的 Bundlesize 检查状态](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=5&hl=cs)
您今天的应用速度可能很快,但添加新代码通常会改变这一状况。使用 bundlesize 检查拉取请求将有助于避免性能下降。Bootstrap、Tinder、Trivago 和许多其他公司都在使用它来控制预算。
使用 bundlesize,您可以单独为每个文件设置阈值。如果您要在应用中拆分 bundle,这尤其有用。
默认情况下,它会测试 gzip 资源大小。您可以使用压缩选项切换到 brotli 压缩或彻底关闭该功能。
Lighthouse 聊天机器人
![Lighthouse 聊天机器人](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=5&hl=cs)
Lighthouse 聊天机器人与 Travis CI 集成,并根据五个 Lighthouse 审核类别中的任何一个强制执行预算。例如,为 Lighthouse 性能得分设置 100 的预算。有时,关注单个数字比关注单个素材资源预算更简单,并且 Lighthouse 得分会将许多因素考虑在内。
![Lighthouse 得分 🔔?](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=5&hl=cs)
将网站部署到预演服务器后,Lighthouse 聊天机器人会运行审核。在 .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 上某个拉取请求的得分低于您设置的阈值,Lighthouse 聊天机器人可以阻止拉取请求合并。⛔
![在 GitHub 上查看 Lighthouse 聊天机器人的状态](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=5&hl=cs)
然后,Lighthouse 聊天机器人会根据更新后的得分对您的拉取请求发表评论。这是一项简洁的功能,有助于在代码更改时就性能展开讨论。
![Lighthouse 报告拉取请求的得分](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=5&hl=cs)
如果您发现您的拉取请求因 Lighthouse 得分较低而阻止,请使用 Lighthouse CLI 或开发者工具运行审核。它会生成一个报告,其中包含有关简单优化的瓶颈和提示的详细信息。
摘要
工具 | CLI | CI | 摘要 |
---|---|---|---|
灯塔 | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
bundlesize [套装大小] | ✔️ | ✔️ |
|
Lighthouse 聊天机器人 | ❌ | ✔️ |
|