lighthouse ci

Leuchtturm CI

Überblick

Lighthouse CI ist eine Suite von Tools, die das kontinuierliche Ausführen, Speichern, Abrufen und Vergleichen von Lighthouse-Ergebnissen so einfach wie möglich machen.

Schnellstart

Um mit GitHub-Aktionen für allgemeine Projektkonfigurationen zu beginnen, fügen Sie die folgende Datei zu Ihrem GitHub-Repository hinzu. Befolgen Sie die Anleitung „Erste Schritte“, um eine umfassendere Anleitung und Anweisungen zu anderen Anbietern und Setups zu erhalten.

.github/workflows/ci.yml

 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/[email protected]
      - run : npm run build
      - run : lhci autorun

Merkmale

• Erhalten Sie zu jeder PR einen Lighthouse-Bericht.
• Verhindern Sie Rückschritte bei Barrierefreiheit, SEO, Offline-Support und Best Practices für die Leistung.
• Verfolgen Sie Leistungskennzahlen und Lighthouse-Ergebnisse im Laufe der Zeit.
• Legen Sie Leistungsbudgets für Skripte und Bilder fest und halten Sie diese ein.
• Führen Sie Lighthouse mehrmals aus, um die Varianz zu verringern.
• Vergleichen Sie zwei Versionen Ihrer Website, um Verbesserungen und Rückschritte bei einzelnen Ressourcen zu finden.

Dokumentation

Wenn Sie bereits mit kontinuierlicher Integration vertraut sind und über einen bestehenden Prozess verfügen, beginnen Sie mit „Erste Schritte“.

Wenn Sie mit kontinuierlicher Integration nicht vertraut sind, beginnen Sie mit der Einführung in CI.

• Einführung in CI
• Erste Schritte
• Architektur
• Fehlerbehebung / FAQs
• Konfiguration
• Server
• Versionierungsrichtlinie

Verwandte Community-Projekte

Eine Sammlung von Projekten, die Lighthouse CI verwenden und von der Community geschrieben wurden. Wenn Sie Lighthouse CI in Ihrem Open-Source-Projekt verwenden, öffnen Sie eine PR, um es hier hinzuzufügen!

• Lighthouse CI GitHub Action – Führen Sie Lighthouse CI automatisch auf jedem PR mit GitHub Actions aus, keine Infrastruktur erforderlich.

• Lighthouse CI Starter-Beispiel – Ein minimales Beispiel-Repository, das Sie als Vorlage verwenden können, wenn Sie ganz von vorne beginnen, bietet eine einsteigerfreundliche Schnellstartanleitung mit der Create-React-App.

• Lighthouse CI-Vergleichsaktion – Eine Lighthouse CI-Github-Aktion, die den aktuellen Commit-Lauf mit dem Vorgänger-Commit vergleicht und ein Objekt mit den Unterschieden und einer Markdown-Tabelle erstellt, die Sie für verschiedene Zwecke verwenden können.

Community-Leitfäden

Eine Sammlung inoffizieller Blogbeiträge, Tutorials und Anleitungen der Community zur Verwendung von Lighthouse CI. Wenn Sie eine Anleitung zur Verwendung von Lighthouse CI in Ihrem Projekt verfasst haben, öffnen Sie eine PR, um sie hier hinzuzufügen!

HINWEIS: Dies ist keine offizielle Dokumentation. Wir empfehlen Ihnen, sich mit Lighthouse CI vertraut zu machen und „Erste Schritte“ durchzulesen, bevor Sie fortfahren.

• Integrieren Sie Lighthouse CI für den statischen Website-Generator – Ein Artikel über die Integration von Lighthouse CI mit statischen Website-Generatoren wie Gatsby, Jekyll usw.
• Automatisieren von Google Lighthouse-Audits und Hochladen von Ergebnissen in Azure – In diesem Artikel wird die Konfiguration von Lighthouse CI für die Ausführung auf einer Website und das Hochladen der Ergebnisse in einen Lighthouse CI-Server-Docker-Container behandelt, der sowohl lokal als auch in Azure ausgeführt wird.

Mitwirken

Wir freuen uns über Beiträge zu lighthouse-ci! Lesen Sie unseren Beitragsleitfaden, um loszulegen.