Sie haben hart daran gearbeitet, schnell zu sein. Sorgen Sie jetzt dafür, dass Sie schnell bleiben, indem Sie Leistungstests mit Lighthouse Bot automatisieren.
Lighthouse bewertet Ihre App in fünf Kategorien, darunter die Leistung. Sie könnten zwar versuchen, Leistungsänderungen jedes Mal, wenn Sie Ihren Code bearbeiten, mit den DevTools oder der Lighthouse-Befehlszeile zu überwachen, aber das ist nicht nötig. Tools können Ihnen die mühsame Arbeit abnehmen. Travis CI ist ein hervorragender Dienst, der automatisch Tests für Ihre App in der Cloud ausführt, wenn Sie neuen Code übertragen.
Lighthouse Bot lässt sich in Travis CI einbinden. Mit der Funktion für Leistungsbudgets wird sichergestellt, dass Sie die Leistung nicht versehentlich verschlechtern, ohne es zu bemerken. Sie können Ihr Repository so konfigurieren, dass Pull-Requests nicht zusammengeführt werden können, wenn die Lighthouse-Werte unter den von Ihnen festgelegten Schwellenwert fallen (z.B. < 96/100).
Sie können die Leistung zwar auf localhost testen, aber Ihre Website wird auf Live-Servern oft anders funktionieren. Um ein realistischeres Bild zu erhalten, sollten Sie Ihre Website auf einem Staging-Server bereitstellen. Sie können einen beliebigen Hostingdienst verwenden. In diesem Leitfaden wird Firebase Hosting verwendet.
1. Einrichtung
Mit dieser einfachen App können Sie drei Zahlen sortieren.
Klonen Sie das Beispiel von GitHub und fügen Sie es als Repository in Ihrem GitHub-Konto hinzu.
2. In Firebase bereitstellen
Als Erstes benötigen Sie ein Firebase-Konto. Wenn Sie das erledigt haben, erstellen Sie ein neues Projekt in der Firebase Console, indem Sie auf „Projekt hinzufügen“ klicken:
In Firebase bereitstellen
Sie benötigen die Firebase CLI, um die App bereitzustellen. Auch wenn Sie sie bereits installiert haben, ist es ratsam, die CLI regelmäßig mit diesem Befehl auf die neueste Version zu aktualisieren:
npm install -g firebase-tools
So autorisieren Sie das Firebase CLI:
firebase login
Initialisieren Sie das Projekt jetzt:
firebase init
Während der Einrichtung werden Ihnen auf der Konsole einige Fragen gestellt:
- Wenn Sie aufgefordert werden, Funktionen auszuwählen, wählen Sie „Hosting“ aus.
- Wählen Sie für das Standard-Firebase-Projekt das Projekt aus, das Sie in der Firebase Console erstellt haben.
- Geben Sie „public“ als öffentliches Verzeichnis ein.
- Geben Sie „N“ (Nein) ein, um die Konfiguration als Single-Page-Anwendung abzulehnen.
Dabei wird eine firebase.json-Konfigurationsdatei im Stammverzeichnis Ihres Projekts erstellt.
Glückwunsch! Sie können die Lösung jetzt bereitstellen. Ausführen:
firebase deploy
In Sekundenschnelle haben Sie eine aktive App.
3. Travis einrichten
Sie müssen ein Konto bei Travis registrieren und dann die GitHub Apps-Integration im Bereich „Einstellungen“ Ihres Profils aktivieren.
Wenn Sie ein Konto haben
Rufen Sie in Ihrem Profil die Einstellungen auf, klicken Sie auf die Schaltfläche „Konto synchronisieren“ und prüfen Sie, ob Ihr Projekt-Repository auf Travis aufgeführt ist.
Für den Einstieg in die Continuous Integration benötigen Sie zwei Dinge:
- Eine
.travis.yml-Datei im Stammverzeichnis haben - Build durch einen regulären Git-Push auslösen
Das lighthouse-bot-starter-Repository enthält bereits eine .travis.yml-YAML-Datei:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
Die YAML-Datei weist Travis an, alle Abhängigkeiten zu installieren und Ihre App zu erstellen. Jetzt sind Sie an der Reihe, die Beispiel-App in Ihr eigenes GitHub-Repository zu übertragen. Führen Sie ggf. den folgenden Befehl aus:
git push origin main
Klicken Sie in Travis unter „Settings“ (Einstellungen) auf Ihr Repository, um das Travis-Dashboard Ihres Projekts aufzurufen. Wenn alles in Ordnung ist, wird der Build nach einigen Minuten von Gelb zu Grün wechseln. 🎉
4. Firebase-Bereitstellung mit Travis automatisieren
In Schritt 2 haben Sie sich in Ihrem Firebase-Konto angemeldet und die App über die Befehlszeile mit firebase deploy bereitgestellt. Damit Travis Ihre App in Firebase bereitstellen kann, müssen Sie die Bereitstellung autorisieren. Wie gehen Sie dabei vor? Mit einem Firebase-Token.
🗝️🔥
Firebase autorisieren
Führen Sie den folgenden Befehl aus, um das Token zu generieren:
firebase login:ci
Dadurch wird ein neuer Tab in einem Browserfenster geöffnet, damit Firebase Sie bestätigen kann. Danach sehen Sie in der Konsole Ihr neu erstelltes Token. Kopieren Sie den Code und kehren Sie zu Travis zurück.
Rufen Sie im Travis-Dashboard Ihres Projekts Weitere Optionen > Einstellungen > Umgebungsvariablen auf.
Fügen Sie das Token in das Wertfeld ein, benennen Sie die Variable FIREBASE_TOKEN und fügen Sie sie hinzu.
Bereitstellung zu Ihrer Travis-Einrichtung hinzufügen
Die folgenden Zeilen sind erforderlich, damit Travis die App nach jedem erfolgreichen Build bereitstellt.
Fügen Sie sie am Ende der Datei .travis.yml hinzu. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Übertragen Sie diese Änderung per Push an GitHub und warten Sie auf die erste automatische Bereitstellung. Wenn Sie sich Ihr Travis-Log ansehen, sollte dort bald ✔️ Deploy complete! stehen.
Wenn Sie jetzt Änderungen an Ihrer App vornehmen, werden diese automatisch in Firebase bereitgestellt.
5. Lighthouse Bot einrichten
Der Friendly Lighthouse Bot informiert Sie über die Lighthouse-Werte Ihrer App. Sie benötigen lediglich eine Einladung zu Ihrem Repository.
Rufen Sie auf GitHub die Einstellungen Ihres Projekts auf und fügen Sie „lighthousebot“ als Mitwirkenden hinzu („Settings“ > „Collaborators“):
Die Genehmigung dieser Anfragen erfolgt manuell und kann daher etwas dauern. Bevor Sie mit dem Testen beginnen, müssen Sie sicherstellen, dass lighthousebot den Status als Mitwirkender genehmigt hat. In der Zwischenzeit müssen Sie den Umgebungsvariablen Ihres Projekts auf Travis einen weiteren Schlüssel hinzufügen. Gib hier deine E‑Mail-Adresse ein. Du erhältst dann einen Lighthouse Bot-Schlüssel in deinem Posteingang. 📬
Fügen Sie diesen Schlüssel in Travis als Umgebungsvariable hinzu und nennen Sie ihn LIGHTHOUSE_API_KEY:
Lighthouse Bot zu Ihrem Projekt hinzufügen
Fügen Sie als Nächstes Lighthouse Bot Ihrem Projekt hinzu, indem Sie folgenden Befehl ausführen:
npm i --save-dev https://github.com/ebidel/lighthousebot
Fügen Sie Folgendes zu package.json hinzu:
"scripts": {
"lh": "lighthousebot"
}
Lighthouse-Bot zur Travis-Konfiguration hinzufügen
Als letzten Trick sollten Sie die Leistung der App nach jedem Pull-Request testen.
Fügen Sie in .travis.yml einen weiteren Schritt in after_success ein:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Damit wird ein Lighthouse-Audit für die angegebene URL ausgeführt. Ersetzen Sie also https://staging.example.com durch die URL Ihrer App (your-app-123.firebaseapp.com).
Legen Sie hohe Standards fest und passen Sie die Einrichtung so an, dass keine Änderungen an der App akzeptiert werden, die den Leistungsindex unter 95 % senken:
- npm run lh -- --perf=95 https://staging.example.com
Pull-Anfrage stellen, um den Lighthouse-Bot-Test in Travis zu starten
Lighthouse Bot testet nur Pull-Anfragen. Wenn Sie also jetzt in den Hauptzweig pushen, erhalten Sie in Ihrem Travis-Log nur die Meldung „This script can only be run on Travis PR requests“ (Dieses Skript kann nur für Travis-Pull-Anfragen ausgeführt werden).
So lösen Sie den Lighthouse Bot-Test aus:
- Neuen Zweig auschecken
- Auf GitHub übertragen
- Pull-Anfrage stellen
Warten Sie auf der Seite der Pull-Anfrage, bis der Lighthouse-Bot sich meldet. 🎤
Der Leistungsfaktor ist hervorragend, die App liegt unter dem Budget und die Prüfung wurde bestanden.
Weitere Lighthouse-Optionen
Lighthouse testet fünf verschiedene Kategorien. Sie können die Punktzahlen für alle diese mit Lighthouse Bot-Flags erzwingen:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Beispiel:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Der Pull-Request schlägt fehl, wenn der Leistungs-Score unter 93 oder der SEO-Score unter 100 fällt.
Sie können auch festlegen, dass Sie die Kommentare des Lighthouse-Bots nicht erhalten möchten. Verwenden Sie dazu die Option --no-comment.