Leistungsbudgets mit der Angular CLI

Beobachten Sie die Größe Ihrer Bundles im Zeitverlauf, damit Ihre Anwendung weiterhin schnell bleibt.

Minko Gechev

Die Optimierung einer Angular-Anwendung ist wichtig. Wie sorgen Sie jedoch dafür, dass die Leistung im Laufe der Zeit nicht abnimmt? Durch die Einführung von Leistungsmesswerten und deren Überwachung bei jeder Codeänderung.

Ein wichtiger Messwert ist die Größe des mit Ihrer Anwendung bereitgestellten JavaScript-Codes. Wenn Sie ein Leistungsbudget einführen, das Sie bei jedem Build oder Pull-Request überwachen, können Sie dafür sorgen, dass Ihre Optimierungen im Laufe der Zeit erhalten bleiben.

Leistungsbudget berechnen

Mit diesem Online-Budgetrechner können Sie schätzen, wie viel JavaScript Ihre App laden kann, je nachdem, welche Time to Interactive Sie anstreben.

Leistungsbudget in der Angular-Befehlszeile konfigurieren

Sobald Sie ein JavaScript-Budget festgelegt haben, können Sie es mit der Angular-Befehlszeile erzwingen. Diese Beispiel-App auf GitHub zeigt, wie das funktioniert.

Sie sehen, dass in angular.json das folgende Budget konfiguriert wurde:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Hier eine Zusammenfassung der Angaben:

• Es gibt ein Budget für ein JavaScript-Bundle namens main.
• Wenn das main-Bundle größer als 170 KB wird, zeigt die Angular CLI beim Erstellen der App eine Warnung in der Konsole an.
• Wenn das main-Bundle größer als 250 KB wird, schlägt der Build fehl.

Versuchen Sie nun, die App zu erstellen, indem Sie ng build --prod ausführen.

In der Console sollte folgender Fehler angezeigt werden:

Sehen Sie sich app.component.ts an, um den Buildfehler zu beheben. Es enthält einen Import aus rxjs/internal/operators. Dies ist ein privater Import, der nicht von Nutzern von rxjs verwendet werden soll. Das erhöht die Größe des Bundles erheblich. Wenn Sie den korrekten Import rxjs/operators aktualisieren und den Build noch einmal ausführen, wird die Budgetprüfung erfolgreich bestanden.

Da das differenzielle Laden in der Angular-Befehlszeile standardmäßig aktiviert ist, werden mit dem Befehl ng build zwei Builds der App erstellt:

• Ein Build für Browser, die ECMAScript 2015 unterstützen. Dieser Build enthält weniger Polyfills und eine modernere JavaScript-Syntax. Diese Syntax ist ausdrucksstärker, was zu kleineren Bundles führt.
• Eine Version für ältere Browser ohne ECMAScript 2015-Unterstützung. Die ältere Syntax ist weniger ausdrucksstark und erfordert mehr Polyfills, was zu größeren Bundles führt.

Die index.html-Datei der Beispiel-App bezieht sich auf beide Builds, damit moderne Browser den kleineren ECMAScript 2015-Build nutzen können und ältere Browser auf den ECMAScript 5-Build zurückgreifen können.

Budget als Teil der kontinuierlichen Integration erzwingen

Continuous Integration (CI) bietet eine praktische Möglichkeit, das Budget Ihrer App im Zeitverlauf zu beobachten. Glücklicherweise ist die schnellste Einrichtung die Erstellung Ihrer App mit der Angular-Befehlszeile – ohne zusätzliche Schritte. Wenn das JavaScript-Bundle das Budget überschreitet, wird der Prozess mit dem Code 1 beendet und der Build schlägt fehl.

Alternativ können Sie ein Leistungsbudget auch mit bundlesize und Lighthouse erzwingen. Der Hauptunterschied zwischen Leistungsbudgets in der Angular-Befehlszeile und Lighthouse besteht darin, wann die Prüfungen durchgeführt werden. Die Angular CLI führt die Prüfungen zum Zeitpunkt des Builds durch, indem sie die Produktions-Assets überprüft und ihre Größe prüft. Lighthouse öffnet jedoch die bereitgestellte Version der Anwendung und misst die Asset-Größe. Beide Ansätze haben Vor- und Nachteile. Die Prüfung, die die Angular-Befehlszeile durchführt, ist weniger robust, aber viel schneller, da es sich um eine einzelne Laufwerksuche handelt. Die LightWallet von Lighthouse kann dagegen eine sehr genaue Prüfung durchführen, da dynamisch geladene Ressourcen berücksichtigt werden. Allerdings muss die App jedes Mal bereitgestellt und geöffnet werden, wenn sie ausgeführt wird.

„bundlesize“ ähnelt der Budgetprüfung der Angular-Befehlszeile. Der Hauptunterschied besteht darin, dass die Ergebnisse der Prüfung mit „bundlesize“ direkt in der Benutzeroberfläche von GitHub angezeigt werden können.

Fazit

Legen Sie mit der Angular-Befehlszeile Leistungsbudgets fest, damit die Leistung Ihrer Angular-Anwendung im Laufe der Zeit nicht abnimmt:

1. Legen Sie einen Referenzwert für die Ressourcengröße fest. Verwenden Sie dazu einen Budgetrechner oder folgen Sie den Praktiken Ihrer Organisation.
2. Größenbudgets in angular.json unter projects.[PROJECT-NAME].architect.build.configurations.production.budgets konfigurieren
3. Die Budgets werden bei jedem Build mit der Angular-Befehlszeile automatisch erzwungen.
4. Sie sollten die Budgetüberwachung als Teil der kontinuierlichen Integration einführen. Dies ist auch mit der Angular-Befehlszeile möglich.