Bundlesize mit Travis CI verwenden

Milica Mihajlija

Mit bundlesize und Travis CI können Sie Leistungsbudgets mit minimalem Einrichtungsaufwand definieren und im Rahmen Ihres Entwicklungs-Workflows erzwingen. Travis CI ist ein Dienst, der jedes Mal, wenn Sie Code per Push an GitHub übertragen, Tests für Ihre App in der Cloud ausführt. Sie können Ihr Repository so konfigurieren, dass Pull-Requests nur zusammengeführt werden können, wenn die Tests zur 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 Anstieg der Größe.

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

Leistungsbudget festlegen

Dieser Glitch enthält bereits die Bundlegröße.

• Klicken Sie auf Remix erstellen, um zu bearbeiten, damit das Projekt bearbeitet werden kann.

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 das Leistungsbudget im Feld maxSize auf 170 KB fest.

Bundlesize unterstützt Glob-Muster. Der Platzhalter * im Dateipfad entspricht allen Bündelnamen im öffentlichen Ordner.

Testskript erstellen

Da Travis einen Test zum Ausführen benötigt, fügen Sie package.json ein Testskript hinzu:

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

Kontinuierliche Integration einrichten

GitHub und Travis CI einbinden

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 GitHub Apps-Integration im Bereich „Einstellungen“ Ihres Profils aktivieren.

Wenn 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 in Travis aufgeführt ist.

„bundlesize“ zum Posten von Pull-Anfragen autorisieren

Bundlesize benötigt eine Autorisierung, um Pull-Anfragen zu posten. Rufen Sie diesen Link auf, um das Bundlesize-Token zu erhalten, das in der Travis-Konfiguration gespeichert wird.

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

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

Das Letzte, was Sie für die Continuous Integration benötigen, ist eine .travis.yml-Datei, die Travis CI anweist, was zu tun ist. Um die Dinge zu beschleunigen, ist sie bereits im Projekt enthalten und gibt an, dass die App NodeJS verwendet.

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

Jetzt ausprobieren

Ersten Test zur Paketgröße auslösen

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

1. Klicken Sie in Glitch auf Tools > Git, Import, and Export > Export to GitHub (Tools > Git, Importieren und Exportieren > Nach GitHub exportieren).

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

3. Erstellen Sie eine neue Pull-Anfrage, indem Sie auf der Startseite des Repositorys auf die Schaltfläche New pull request (Neue Pull-Anfrage) klicken.

Auf der Seite mit der Pull-Anfrage wird jetzt angezeigt, dass Statusprüfungen laufen.

Es dauert nicht lange, bis alle Prüfungen abgeschlossen sind. Leider ist die App zum Abstimmen über Katzen etwas aufgebläht und besteht die Prüfung des Leistungsbudgets nicht. Das Haupt-Bundle ist 266 KB groß, das Budget beträgt 170 KB.

Optimieren

Glücklicherweise gibt es einige einfache Möglichkeiten, die Leistung zu verbessern, indem Sie nicht verwendeten 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 viel mehr als nur eine Datenbank umfasst (Authentifizierung, Speicher, Messaging usw.).

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

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 (Konsole). Die Konsole wird 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 nach GitHub über Tools > Git, Import, and Export > Export to GitHub (Tools > Git, Importieren und Exportieren > Nach 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 das Importieren von Teilen der Moment-Bibliothek nicht so einfach, aber es ist einen Versuch wert. Im Codelab zum Entfernen von nicht verwendetem Code erfahren Sie, wie Sie die App weiter optimieren können.

Überwachen

Die App liegt jetzt unter dem Budget und alles ist in Ordnung. Travis CI und bundlesize überwachen das Leistungsbudget für Sie, damit Ihre App schnell bleibt.