Bundlesize mit Travis CI verwenden

Milica Mihajlija

Wenn Sie bundlesize mit Travis CI verwenden, können Sie Leistungsbudgets mit minimalem Einrichtungsaufwand definieren und als Teil Ihres Entwicklungsworkflows erzwingen. Travis CI ist ein Dienst, der jedes Mal, wenn Sie Code auf GitHub pushen, Tests für Ihre App in der Cloud ausführt. Sie können Ihr Repository so konfigurieren, dass das Zusammenführen von Pull-Requests nur zulässig ist, wenn die Tests für die Bundle-Größe bestanden wurden.

Die GitHub-Prüfungen von Bundlesize umfassen einen Größenvergleich mit dem Hauptzweig und eine Warnung bei einem großen Größensprung.

Hier ist eine App, die mit webpack gebündelt ist und mit der Sie für Ihr Lieblingskätzchen stimmen können.

Leistungsbudget festlegen

Dieser Glitch enthält bereits „bundlesize“.

• Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.

Das Haupt-Bundle dieser App befindet sich im öffentlichen Ordner. Fügen Sie der Datei package.json den folgenden Abschnitt hinzu, um die Größe zu testen:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Damit die Größe des komprimierten JavaScript-Bundles unter dem empfohlenen Grenzwert bleibt, legen Sie im Feld maxSize ein Leistungsbudget von 170 KB fest.

Bundlesize unterstützt Glob-Muster. Das Platzhalterzeichen „*“ im Dateipfad stimmt mit allen Bundle-Namen im öffentlichen Ordner überein.

Testscript erstellen

Da Travis einen Test benötigt, fügen Sie package.json ein Testscript hinzu:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Kontinuierliche Integration einrichten

GitHub und Travis CI integrieren

Erstellen Sie zuerst ein neues Repository für dieses Projekt in Ihrem GitHub-Konto und initialisieren Sie es mit einer README.md.

Sie müssen ein Konto bei Travis registrieren und die Integration von GitHub-Apps im Bereich „Einstellungen“ Ihres Profils aktivieren.

Sobald Sie ein Konto haben, rufen Sie unter Ihrem Profil die Einstellungen auf, klicken Sie auf die Schaltfläche Konto synchronisieren und prüfen Sie, ob Ihr neues Repository bei Travis aufgeführt ist.

Autorisieren, dass die Bundle-Größe in Pull-Anfragen gepostet wird

Bundlesize benötigt eine Autorisierung, um Pull-Anfragen übermitteln zu können. Rufen Sie daher diesen Link auf, um das Bundlesize-Token abzurufen, das in der Travis-Konfiguration gespeichert wird.

Klicken Sie im Travis-Dashboard Ihres Projekts auf Weitere Optionen > Einstellungen > Umgebungsvariablen.

Fügen Sie eine neue Umgebungsvariable mit dem Token als Wertfeld und BUNDLESIZE_GITHUB_TOKEN als Namen hinzu.

Zum Starten der kontinuierlichen Integration müssen Sie als Letztes eine .travis.yml-Datei erstellen, die Travis CI mitteilt, was zu tun ist. Um den Vorgang zu beschleunigen, ist sie bereits im Projekt enthalten und gibt an, dass die Anwendung NodeJS verwendet.

Damit ist die Einrichtung abgeschlossen und Bundlesize warnt Sie, wenn Ihr JavaScript das Budget überschreitet. Auch wenn Sie gut anfangen, können sich im Laufe der Zeit, wenn Sie neue Funktionen hinzufügen, viele Kilobyte ansammeln. Mit dem automatischen Monitoring des Leistungsbudgets können Sie sich darauf verlassen, dass es nicht unbemerkt bleibt.

Jetzt ausprobieren

Ersten Test der Bundle-Größe auslösen

Fügen Sie den Code dem GitHub-Repository hinzu, das Sie in Schritt 3 erstellt haben, um zu sehen, wie die App im Vergleich zum Leistungsbudget abschneidet.

1. Klicken Sie in Glitch auf Tools > Git, Importieren und Exportieren > Zu GitHub exportieren.

2. Geben Sie im Pop-up-Fenster Ihren GitHub-Nutzernamen und den Namen des Repos als username/repo ein. Glitch exportiert Ihre App in einen neuen Branch namens „glitch“.

3. Klicken Sie auf der Startseite des Repositories auf die Schaltfläche New pull request (Neuer Pull-Request), um einen neuen Pull-Request zu erstellen.

Auf der Seite mit dem Pull-Request werden jetzt laufende Statusprüfungen angezeigt.

Es dauert nicht lange, bis alle Prüfungen abgeschlossen sind. Leider ist die App für die Katzenwahl etwas überladen und besteht die Prüfung des Leistungsbudgets nicht. Das Haupt-Bundle beträgt 266 KB und das Budget 170 KB.

Optimieren

Glücklicherweise lässt sich die Leistung leicht steigern, wenn Sie ungenutzten Code entfernen. Es gibt zwei Hauptimporte in src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

Die App verwendet die Firebase Realtime Database zum Speichern der Daten, importiert aber das gesamte Firebase-Paket, das weit mehr als nur eine Datenbank umfasst (Authentifizierung, Speicher, Messaging usw.).

Korrigieren Sie das Problem, indem Sie nur das Paket importieren, das die App benötigt, in die Datei src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Test wiederholen

Da die Quelldatei aktualisiert wurde, müssen Sie webpack ausführen, um die neue Bundle-Datei zu erstellen.

1. Klicken Sie auf die Schaltfläche Tools.

2. Klicken Sie dann auf die Schaltfläche Console. Daraufhin wird die Konsole in einem anderen Tab geöffnet.

3. Geben Sie in der Konsole webpack ein und warten Sie, bis der Build abgeschlossen ist.

4. Exportieren Sie den Code zu GitHub über Tools > Git, Importieren und Exportieren > Zu GitHub exportieren.

5. Rufen Sie die Seite mit der Pull-Anfrage auf GitHub auf und warten Sie, bis alle Prüfungen abgeschlossen sind.

Fertig! Die neue Größe des Bundles beträgt 125,5 KB und alle Prüfungen wurden bestanden. 🎉

Im Gegensatz zu Firebase ist der Import von Teilen der Moment-Bibliothek nicht ganz so einfach. Es lohnt sich aber, es zu versuchen. Im Codelab Nicht verwendeten Code entfernen erfahren Sie, wie Sie die App weiter optimieren können.

Überwachen

Das Budget für die App ist ausgeschöpft und alles ist in Ordnung. Travis CI und bundlesize überwachen das Leistungsbudget für Sie und sorgen dafür, dass Ihre App schnell bleibt.