Lighthouse, ein kostenloses und Open-Source-Tool, bewertet die Leistung der Website, die Zug?nglichkeit, die Metriken für progressive Web-Apps, SEO und mehr. Zugriff am einfachsten über die Registerkarte "Lighthouse" Chrome Devtools "Lighthouse" und generiert Berichte nach dem Ausführen von Tests und vereinfacht die Webseitenanalyse unabh?ngig vom ?ffentlichen oder Authentifizierungsstatus. Nicht-Chrom-/Chrom-Benutzer k?nnen die Weboberfl?che des Leuchtturms (nur für ?ffentliche Seiten) oder die Knoten-CLI für Befehlszeilenprüfungen verwenden.

Manuelle Tests sind jedoch ineffizient. Der Lighthouse CI integriert sich nahtlos in die kontinuierliche Integration und bietet Inline -Pull -Request -Feedback- und Erstellungsfehlerbenachrichtigungen anhand der Leistungsschwellen. Es analysiert die Auswirkungen der Code?nderungen auf Leistung, SEO, Barrierefreiheit, Offline -Funktionen und Best Practices, Durchsetzung von Leistungsbudgets und Verfolgung von Metrik?nderungen im Laufe der Zeit.

In diesem Leitfaden wird die Integration des lokalen Lighthouse CI -Setups und Github -Aktionen beschrieben (obwohl sie auch Travis CI, Gitlab CI und Circle CI unterstützt).

Lokaler Leuchtturm CI -Setup

Stellen Sie vor dem Start sicher, dass Sie über Node.js v10 LTS oder sp?ter und Google Chrome (stabil) verfügen. Installieren Sie den Leuchtturm CI CLI weltweit:

 npm install -g @lhci/cli

Verwenden Sie lhci --help , um verfügbare Befehle zu erkunden (acht zum Zeitpunkt des Schreibens).

Die Konfiguration ist flexibel, indem sie eine Konfigurationsdatei ( .lighthouserc.js ), Umgebungsvariablen oder CLI -Flags (in der Reihenfolge der Vorrang). In diesem Handbuch wird eine Konfigurationsdatei verwendet.

Erstellen Sie lighthouserc.js in der Wurzel Ihres Projekts (Git Tracking wird angenommen; ansonsten verwenden Sie Umgebungsvariablen für den Erstellungskontext).

Diese grundlegende Konfiguration sammelt Lighthouse -Berichte für eine statische Website und l?dt sie in einen vorübergehenden ?ffentlichen Speicher hoch:

 // lightthouserc.js
module.exports = {
  CI: {
    sammeln: {
      staticdistdir: './public',
    },
    hochladen: {
      Ziel: 'Tempor?res ?ffentliches Storage',
    },
  },
};

Verwenden Sie für Projekte, die benutzerdefinierte Server ben?tigen, und verwenden Sie startServerCommand und url :

 module.exports = {
  CI: {
    sammeln: {
      startservercommand: 'npm run server',
      URL: ['http: // localhost: 4000/'],
    },
    hochladen: {
      Ziel: 'Tempor?res ?ffentliches Storage',
    },
  },
};

Der Serverbefehl wird ausgeführt und die Bereitschaft des Servers wird erkannt (Standard: 10-Sekunden-Zeitüberschreitung). Passen Sie das Muster und die Zeitüberschreitung mit startServerReadyPattern und startServerReadyTimeout an und die Anzahl der L?ufe mit numberOfRuns :

 // lightthouserc.js
module.exports = {
  CI: {
    sammeln: {
      startservercommand: 'npm run server',
      URL: ['http: // localhost: 4000/'],
      startserverreadypattern: 'Server l?uft auf Port 4000',
      startserverReadyTimeout: 20000, // Millisekunden
      numberofruns: 5,
    },
    hochladen: {
      Ziel: 'Tempor?res ?ffentliches Storage',
    },
  },
};

temporary-public-storage hochladen Berichte in Google Cloud Storage (vorübergehend, ?ffentlich zug?nglich). Die Dokumentation finden Sie in alternativen Speicheroptionen.

Run Lighthouse CI:

 LHCI Autorun

Die Ausgabe zeigt die Testergebnisse und die Meldung von URLs.

Behauptungskonfiguration

Verbessern Sie den Lighthouse CI, indem Sie Build -Fehler basierend auf den Testergebnissen unter Verwendung der assert -Eigenschaft konfigurieren:

 // lightthouserc.js
module.exports = {
  CI: {
    Assert: {
      Voreinstellung: 'Leuchtturm: no-pwa',
      Behauptungen: {{
        'Kategorien: Leistung': ['Fehler', {MinScore: 0.9}],
        'Kategorien: Barrierefreiheit': ['Warn', {Minscore: 0.9}],
      },
    },
  },
};

Voreinstellungen ( lighthouse:all , lighthouse:recommended , lighthouse:no-pwa ) bieten schnelle Behauptungskonfigurationen. Anpassen von Behauptungen mithilfe des assertions -Objekts oder einer budget.json -Datei (manuell erstellt oder über PerformanceBudget.io generiert).

Integration von Github -Aktionen

Erstellen Sie .github/workflow/lighthouse-ci.yaml um den Lighthouse CI in GitHub-Aktionen zu integrieren. Dieses Beispiel ist für eine Hugo -Website; nach Bedarf anpassen:

 # .Github/Workflow/Lighthouse-ci.yaml
Name: Leuchtturm
ON: [Push]
Jobs:
  CI:
    L?ufe: Ubuntu-latest
    Schritte:
      - Name: Checkout -Code
        Verwendungen: Aktionen/Checkout@v2
        mit:
          Token: $ {{secrets.pat}}
          Submodules: rekursiv
      - Name: Setup Hugo Setup
        Verwendungen: Peaceiris/Action-Hugo@v2
        mit:
          Hugo-Version: "0,76,5"
          erweitert: wahr
      - Name: Site erstellen
        Lauf: Hugo
      - Name: Verwenden Sie node.js 15.x
        Verwendungen: Aktionen/Setup-Node@v2
        mit:
          Node-Version: 15.x
      - Name: Führen Sie den Leuchtturm CI aus
        Run: |
          npm install -g @lhci/[E -Mail geschützt]
          LHCI Autorun

Dieser Workflow überprüft das Repository (Handling Submodules und private Repositories über pers?nliche Zugriffsantritte), setzt Hugo ein, erstellt die Website, richtet Node.js ein und l?uft lhci autorun .

GitHub -Statusprüfungen

Konfigurieren Sie die GitHub -Statusprüfungen für die Inline -Pull -Request -Reporting, indem Sie die Lighthouse CI Github -App installieren, dessen Token erhalten und als Repository -Geheimnis ( LHCI_GITHUB_APP_TOKEN ) hinzugefügt werden.

Leuchtturm CI Server

Für den privaten oder langfristigen Speicher und Vergleich für private oder langfristige Berichte stellen Sie den Lighthouse CI-Server bereit (Heroku- und Docker-Bereitstellungsanweisungen finden Sie auf GitHub).

Abschluss

Fügen Sie mehrere URLs in Ihre Konfiguration für umfassende Tests hinzu (Homepage, repr?sentative Beitr?ge usw.). Dieser Leitfaden bietet eine Grundlage für die Nutzung der F?higkeiten von Lighthouse CI.

Das obige ist der detaillierte Inhalt vonKontinuierliche Leistungsanalyse mit Leuchtturm -CI- und GitHub -Aktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!