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 Tests für Ihre Anwendung in der Cloud ausführt, wenn Sie Code per Push an GitHub übertragen. Sie können Ihr Repository so konfigurieren, dass es das Zusammenführen von Pull-Anfragen nur dann zulässt, wenn die Tests der Bundlesize-Größe bestanden wurden.

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

Hier ist eine App im Webpack, mit der du für dein Lieblingskätzchen abstimmen kannst.

Leistungsbudget festlegen

Dieser Glitch enthält bereits bundlesize.

• Klicke auf Zu bearbeitende Remixe, 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 seine Größe zu testen:

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

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

Bundlesize unterstützt glob-Muster und das Platzhalterzeichen * im Dateipfad stimmt mit allen Bundle-Namen im öffentlichen Ordner überein.

Testskript erstellen

Da Travis einen Test benötigt, füge 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 „Settings“ (Einstellungen) Ihres Profils aktivieren.

Sobald Sie ein Konto haben, rufen Sie unter Ihrem Profil 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 bei Pull-Anfragen autorisieren

Bundlesize benötigt eine Autorisierung, um bei Pull-Anfragen posten zu können. Rufen Sie diesen Link auf, um das Bundlesize-Token abzurufen, 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.

Als Letztes müssen Sie die kontinuierliche Integration mit einer .travis.yml-Datei starten, die Travis CI mitteilt, was zu tun ist. Zur Beschleunigung ist sie bereits im Projekt enthalten und gibt an, dass die Anwendung NodeJS verwendet.

Mit diesem Schritt ist alles eingerichtet und Bundlesize wird Sie gewarnt, falls Ihr JavaScript das Budget überschreitet. Auch wenn Sie gut anfangen, können sich mit der Zeit Kilobyte ansammeln. Mit der automatisierten Überwachung des Leistungsbudgets können Sie sich darauf verlassen, dass sie nicht unbemerkt bleibt.

Ausprobieren

Ersten Test für Bundlegröße auslösen

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

1. Klicke in Glitch auf Tools > Git, Import and Export > Export to GitHub.

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

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

Auf der Seite „Pull-Anfragen“ wird jetzt der Status „In Bearbeitung“ angezeigt.

Es dauert nicht lange, bis alle Überprüfungen abgeschlossen sind. Leider ist die Katzenabstimmung-App etwas aufgebläht und besteht nicht die Prüfung des Leistungsbudgets. Das Hauptpaket beträgt 266 KB und das Budget 170 KB.

Optimieren

Glücklicherweise lassen sich durch Entfernen von nicht verwendetem Code einige einfache Leistungssteigerungen erzielen. In src/index.js gibt es zwei Hauptimporte:

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

Die App verwendet Firebase Realtime Database zum Speichern der Daten, importiert aber das gesamte Firebase-Paket, das viel mehr als nur eine Datenbank enthält (Auth, Storage, Messaging usw.).

Beheben Sie das Problem, indem Sie in der Datei src/index.js nur das Paket importieren, das die Anwendung 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. Dadurch wird die Konsole in einem neuen Tab geöffnet.

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

4. Exportieren Sie den Code über Tools > Git, Import and Export > Export to GitHub in GitHub.

5. Rufen Sie die Seite für Pull-Anfragen 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 waren bestanden. 🎉

Im Gegensatz zu Firebase lassen sich Teile der Momentbibliothek nicht so einfach importieren, aber es ist einen Versuch wert. Im Ungenutzten Codelab entfernen erfahren Sie, wie Sie die App weiter optimieren können.

Überwachen

Die App liegt jetzt unter dem Budget und alles ist gut. Travis CI und Bundlesize überwachen das Leistungsbudget weiterhin für Sie, damit Ihre Anwendung schnell bleibt.