Leistungsbudgets mit der Angular CLI

Überwachen Sie die Größe Ihrer Bundles im Zeitverlauf, um sicherzustellen, dass Ihre Anwendung schnell bleibt.

Minko Gechev

Die Optimierung einer Angular-Anwendung ist wichtig, aber wie können Sie dafür sorgen, dass ihre Leistung im Laufe der Zeit nicht abnimmt? Durch die Einführung von Leistungsmesswerten und deren Beobachtung bei jeder Codeänderung!

Ein wichtiger Messwert ist die Größe des mit Ihrer Anwendung gelieferten JavaScript-Codes. Mit einem Leistungsbudget, das Sie bei jeder Build- oder Pull-Anfrage beobachten, können Sie dafür sorgen, dass die Optimierungen auch langfristig beibehalten werden.

Leistungsbudget berechnen

Mit diesem Online-Budgetrechner können Sie schätzen, wie viel JavaScript Ihre App laden kann. Das hängt von der angestrebten Zeit bis Interaktivität ab.

Leistungsbudget in der Angular CLI konfigurieren

Sobald Sie ein JavaScript-Zielbudget haben, können Sie es über die Angular-Befehlszeile erzwingen. Wie das funktioniert, sehen Sie in dieser Beispiel-App auf GitHub.

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

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

Hier eine Zusammenfassung der Festlegungen:

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

Versuchen Sie nun, die App durch Ausführen von ng build --prod zu erstellen.

In der Konsole sollte folgender Fehler angezeigt werden:

Sehen Sie sich app.component.ts an, das einen Import aus rxjs/internal/operators enthält, um den Build-Fehler zu beheben. Dies ist ein privater Import, der von Nutzern von rxjs nicht verwendet werden sollte. Dadurch wird das Set deutlich größer! Wenn Sie auf den richtigen Import rxjs/operators aktualisieren und den Build noch einmal ausführen, werden Sie feststellen, dass die Budgetprüfung erfolgreich bestanden wurde.

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

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

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

Budget im Rahmen der Continuous Integration durchsetzen

Continuous Integration (CI) bietet eine bequeme Möglichkeit, das Budget Ihrer App im Zeitverlauf zu überwachen. Am schnellsten geht das, wenn Sie Ihre App mit der Angular CLI erstellen. Es sind keine zusätzlichen Schritte erforderlich. Wenn das JavaScript-Bundle das Budget überschreitet, wird der Prozess mit Code 1 beendet und der Build schlägt fehl.

Sie können auch ein Leistungsbudget mithilfe von Setsize und Lighthouse erzwingen. Der Hauptunterschied zwischen Leistungsbudgets in Angular CLI und Lighthouse ist der Zeitpunkt, zu dem die Prüfungen durchgeführt werden. Die Angular CLI führt die Prüfungen zum Build-Zeitpunkt durch, sieht sich die Produktions-Assets an und prüft ihre Größe. Lighthouse öffnet jedoch die bereitgestellte Version der Anwendung und misst die Größe des Assets. Beide Ansätze haben Vor- und Nachteile. Die Prüfung, ob Angular CLI ausführt, ist weniger stabil, aber viel schneller, da es sich um einen einzelnen Laufwerk-Lookup handelt. Andererseits kann das LightWallet von Lighthouse eine sehr genaue Prüfung durchführen, indem dynamisch geladene Ressourcen berücksichtigt werden. Allerdings muss die App bei jeder Ausführung bereitgestellt und geöffnet werden.

„bundlesize“ ist der Budgetprüfung der Angular CLI sehr ähnlich. Der Hauptunterschied besteht darin, dass mit „bundlesize“ die Prüfergebnisse direkt in der GitHub-Benutzeroberfläche angezeigt werden können.

Fazit

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

1. Legen Sie eine Basislinie für die Ressourcengröße fest. Verwenden Sie dazu entweder einen Budgetrechner oder befolgen Sie die Praktiken Ihrer Organisation.
2. Konfigurieren Sie Größenbudgets in angular.json unter projects.[PROJECT-NAME].architect.build.configurations.production.budgets
3. Die Budgets werden automatisch für jeden Build mit der Angular CLI durchgesetzt.
4. Sie können das Budgetmonitoring im Rahmen der Continuous Integration einführen (was auch mit der Angular CLI möglich ist).