Lighthouse CI 使用教程

Lighthouse CI 使用教程

lighthouse-ciA useful wrapper around Google Lighthouse CLI项目地址:https://gitcode.com/gh_mirrors/lig/lighthouse-ci

1、项目介绍

Lighthouse CI 是一个用于在持续集成（CI）过程中使用 Lighthouse 的工具套件。Lighthouse 是一个开源的自动化工具，用于提高网页质量，它提供了多种网页性能指标，包括性能、可访问性、最佳实践、SEO 和 PWA。Lighthouse CI 通过一系列工具，使得在 CI 过程中持续运行、保存、检索和断言 Lighthouse 结果变得非常容易。

2、项目快速启动

安装 Lighthouse CI CLI

首先，你需要在本地安装 Lighthouse CI CLI。你可以通过 npm 来安装：

npm install -g @lhci/cli

配置 lighthouserc.js

在你的项目根目录下创建一个 lighthouserc.js 文件，并添加以下配置：

module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist',
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

运行 Lighthouse CI

在你的项目根目录下运行以下命令来执行 Lighthouse CI：

lhci autorun

3、应用案例和最佳实践

应用案例

Lighthouse CI 可以集成到 GitHub Actions 中，自动在每次 Pull Request 时运行 Lighthouse 测试，并在 PR 中显示结果。以下是一个简单的 GitHub Actions 配置示例：

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install && npm install -g @lhci/cli@0.14.x
      - run: npm run build
      - run: lhci autorun

最佳实践

1. 持续监控：使用 Lighthouse CI 持续监控你的网页性能，确保每次代码变更不会导致性能下降。
2. 性能预算：设置性能预算，确保你的网页在性能方面始终保持在可接受的水平。
3. 减少变量：通过多次运行 Lighthouse 测试来减少结果的变量，确保测试结果的准确性。

4、典型生态项目

Lighthouse CI GitHub Action

这是一个 GitHub Action，可以在每次 Pull Request 时自动运行 Lighthouse CI，无需额外的基础设施。

Lighthouse CI Starter Example

这是一个最小化的示例仓库，你可以将其用作从头开始的模板，提供了一个使用 create-react-app 的初学者友好的快速启动指南。

Community Guides

社区编写的一系列非官方博客文章、教程和指南，帮助你更好地使用 Lighthouse CI。

---

通过以上步骤，你可以快速上手并使用 Lighthouse CI 来持续监控和提升你的网页性能。

lighthouse-ciA useful wrapper around Google Lighthouse CLI项目地址:https://gitcode.com/gh_mirrors/lig/lighthouse-ci