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