Sie haben hart daran gearbeitet, Ihre Website schneller zu machen. Sorgen Sie jetzt dafür, dass sie auch so bleibt, indem Sie Leistungstests mit dem Lighthouse-Bot automatisieren.
Lighthouse benotet Ihre App in fünf Kategorien eingeteilt, darunter die Leistung. Sie können sich zwar vornehmen, bei jeder Codebearbeitung die Leistungsänderungen mit den DevTools oder der Lighthouse-Befehlszeile zu beobachten, aber das ist nicht zwingend erforderlich. Tools für die mühsame Arbeit für Sie. Travis CI ist ein hervorragender Dienst, mit dem jedes Mal, wenn Sie neuen Code per Push übertragen, automatisch Tests für Ihre App in der Cloud ausgeführt werden.
Lighthouse Bot lässt sich in Travis CI einbinden. damit Sie die Leistung nicht versehentlich herabsetzen, ohne es zu merken. Sie können Ihr Repository so konfigurieren, dass das Zusammenführen von Pull-Requests nicht zulässig ist, wenn die Lighthouse-Bewertungen unter den von Ihnen festgelegten Grenzwert fallen (z. B. unter 96/100).
Sie können die Leistung zwar auf dem lokalen Host testen, die Leistung Ihrer Website unterscheidet sich jedoch häufig auf Live-Servern. Für ein realistischeres Bild Ihre Website auf einem Staging-Server bereitstellen. Sie können einen beliebigen Hostingdienst verwenden. dies Leitfaden zu Firebase Hosting ausprobieren können.
1. Einrichtung
Mit dieser einfachen App kannst du drei Zahlen sortieren.
Klonen Sie das Beispiel aus GitHub und fügen Sie es Ihrem GitHub-Konto als Repository hinzu.
2. In Firebase bereitstellen
Sie benötigen ein Firebase-Konto, um loszulegen. Sobald Sie das erledigt haben, ein neues Projekt in der Firebase Console erstellen indem Sie auf „Projekt hinzufügen“ klicken:
In Firebase bereitstellen
Sie benötigen die Firebase CLI, um die Auch wenn Sie die Software bereits installiert haben, sollten Sie sie Aktualisieren Sie die Befehlszeile mit dem folgenden Befehl auf die neueste Version:
npm install -g firebase-tools
So autorisieren Sie die Firebase CLI:
firebase login
Initialisieren Sie nun das Projekt:
firebase init
Während der Einrichtung werden Ihnen in der Konsole einige Fragen gestellt:
- Wählen Sie dann „Hosting“ aus.
- Wählen Sie als Standard-Firebase-Projekt das Projekt aus, das Sie in der Firebase Console erstellt haben.
- Geben Sie „öffentlich“ ein. als Ihr öffentliches Verzeichnis.
- Geben Sie „N“ (Nein) ein, um die App als Single-Page-Anwendung zu konfigurieren.
Dadurch wird im Stammverzeichnis des Projektverzeichnisses eine firebase.json-Konfigurationsdatei erstellt.
Die Bereitstellung ist nun abgeschlossen. Ausführen:
firebase deploy
In Sekundenschnelle haben Sie eine Live-App.
3. Travis einrichten
Sie müssen ein Konto bei Travis registrieren und Aktivieren Sie die GitHub-Apps-Integration im Abschnitt „Einstellungen“ Ihres Profils.
Sobald Sie ein Konto haben
Gehe in deinem Profil zu „Einstellungen“, klicke auf die Schaltfläche „Konto synchronisieren“ und vergewissere dich, dass Ihr Projekt-Repository bei Travis aufgeführt ist.
Für die Continuous Integration benötigen Sie zwei Dinge:
- Eine
.travis.yml-Datei im Stammverzeichnis haben - Zum Auslösen eines Builds durch Ausführen eines regulären alten Git-Push-Vorgangs
Das Repository lighthouse-bot-starter hat bereits eine YAML-Datei .travis.yml:
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 ist es an der Zeit, die Beispiel-App in Ihr eigenes GitHub-Repository zu pushen. Führen Sie ggf. den folgenden Befehl aus:
git push origin main
Klicken Sie unter „Einstellungen“ in Travis auf Ihr Repository, um das Travis-Dashboard Ihres Projekts aufzurufen. Wenn alles in Ordnung ist, wird der Status des Builds in wenigen Minuten von gelb auf 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 sie autorisieren. Wie gehen Sie vor? Mit einem Firebase-Token.
🗝️🔥
Firebase autorisieren
Führen Sie den folgenden Befehl aus, um das Token zu generieren:
firebase login:ci
In einem Browserfenster wird ein neuer Tab geöffnet, damit Firebase Ihre Identität bestätigen kann. Danach wird in der Konsole das neu erstellte Token angezeigt. Kopieren Sie es und kehren Sie zu Travis zurück.
Klicken Sie im Travis-Dashboard Ihres Projekts auf Weitere Optionen > Einstellungen > Umgebungsvariablen.
Fügen Sie das Token in das Wertfeld ein, nennen Sie die Variable FIREBASE_TOKEN und fügen Sie sie hinzu.
Bereitstellung zur Travis-Einrichtung hinzufügen
Mit den folgenden Zeilen weisen Sie Travis an, die App nach jedem erfolgreichen Build bereitzustellen.
Fügen Sie sie am Ende der Datei .travis.yml hinzu. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Übertragen Sie diese Änderung auf GitHub und warten Sie auf die erste automatische Bereitstellung. In Ihrem Travis-Protokoll sollte bald Folgendes stehen ✔️ Bereitstellung abgeschlossen!
Wenn Sie jetzt Änderungen an Ihrer App vornehmen, werden diese automatisch in Firebase bereitgestellt.
5. Lighthouse-Bot einrichten
Der Friendly Lighthouse-Bot informiert dich über den Lighthouse-Score deiner App. Dafür ist nur eine Einladung zu Ihrem Repository erforderlich.
Rufen Sie in GitHub die Projekteinstellungen auf und fügen Sie „lighthousebot“ hinzu. als Mitbearbeiter („Einstellungen“ > „Mitbearbeiter“):
Die Genehmigung dieser Anfragen erfolgt manuell und dauert daher nicht immer sofort. Bevor Sie mit dem Testen beginnen, muss LighthouseBot den Status des Mitbearbeiters genehmigt haben. In der Zwischenzeit müssen Sie den Umgebungsvariablen Ihres Projekts auf Travis einen weiteren Schlüssel hinzufügen. E-Mails hinterlassen hier, erhalten Sie einen Lighthouse-Bot-Schlüssel in Ihrem Posteingang. 📬
Fügen Sie diesen Schlüssel in Travis als Umgebungsvariable hinzu und nennen Sie sie LIGHTHOUSE_API_KEY:
Lighthouse-Bot zum Projekt hinzufügen
Fügen Sie als Nächstes Lighthouse Bot Ihrem Projekt hinzu:
npm i --save-dev https://github.com/ebidel/lighthousebot
Fügen Sie dieses Bit in den package.json ein:
"scripts": {
"lh": "lighthousebot"
}
Lighthouse-Bot zur Travis-Konfiguration hinzufügen
Als letzten Trick testen Sie die Leistung der App nach jedem Abruf. anfragen!
Fügen Sie in .travis.yml unter „after_success“ einen weiteren Schritt hinzu:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Es wird eine Lighthouse-Prüfung für die angegebene URL durchgeführt. Ersetzen Sie
https://staging.example.com durch die URL Ihrer App
also „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 Leistungsbewertungswert unter 95 Punkte senken:
- npm run lh -- --perf=95 https://staging.example.com
Pull-Anfrage stellen, um Lighthouse-Bot-Test auf Travis auszulösen
Lighthouse Bot testet nur Pull-Requests. Wenn Sie also jetzt auf den Hauptzweig pushen, wird in Ihrem Travis-Protokoll nur die Meldung „Dieses Script kann nur auf Travis-PR-Anfragen ausgeführt werden“ angezeigt.
So lösen Sie den Lighthouse-Bot-Test aus:
- Neuen Branch auschecken
- An GitHub übertragen
- Pull-Anfrage stellen
Warten Sie auf der Seite des Pull-Requests, bis der Lighthouse-Bot singt. 🎤
Die Leistung ist hervorragend, das Budget der App ist unterschritten und die Prüfung ist erfolgreich.
Weitere Lighthouse-Optionen
Weißt du noch, wie Lighthouse fünf verschiedene Kategorien testet? Sie können Bewertungen für alle mit Lighthouse Bot-Flags:
--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
Fällt die Leistungsbewertung unter 93 oder die SEO, schlägt die PR fehl. unter 100 ab.
Du kannst auch festlegen, dass du die Kommentare des Lighthouse-Bots nicht mit dem --no-comment erhalten möchtest.
Option.