自动为您的 PR 提供灯塔评分（使用 Vercel 和 Github Actions）

TLDR 现在就给我代码！

想象一下一个友好的 Github Action 机器人将其添加到你的仓库的所有 PR（每个提交）中：

绿色灯塔指标

Google Lighthouse 指标为绿色（>= 90）的网页通常速度更快、更易于访问，并且用户体验更佳。如果您作为开发者能够帮助您的公司提升这些指标，这将直接影响您公司的盈利（并有助于您的付费营销和 SEO）。

让 Lighthouse 指标达标的第一步是测量指标。将指标添加到 PR 中，方便您和您的开发者同事轻松了解代码更改对 Lighthouse 指标的影响。

Github Action 工作流程

1. 获取 PR 的预览 URL（来自 Vercel）。
2. 使用此插件对预览 URL 运行 Lighthouse 审核。
3. 将分数格式化为表格（+添加一些表情符号）。
4. 在 PR 上发布带有格式化分数的评论。

PR 上的评论将是粘性评论 - 例如，如果评论存在则更新它，否则添加新评论。

完整的操作可以在这里找到。您可以随意复制粘贴此操作到您的仓库中。

使用的集成：

• treosh/lighthouse-ci-action
• 粘贴拉取请求评论
• vercel-预览-url-操作

不使用 Vercel？

• 更新操作的第 1 步（并从 Netlify 或您自己的部署设置中获取预览 URL）

限制：

• 始终在根页面上运行 Lighthouse 审核。

进一步改进：

• 将行动与预算结合起来，以防止 PR 使指标低于设定的阈值。
• 仅对受 PR 影响的页面运行审核。
• 将收集到的指标与生产站点的实际指标进行比较。

这对你有帮助吗？请点赞分享这篇文章，并在 Twitter 上关注我（我正在开发Glitterly——一个基于 Web 的视频编辑器）。