Diese Seite wurde von der Cloud Translation API übersetzt.

Leistungsbudgets in Ihren Build-Prozess einbinden

Milica Mihajlija

Nachdem Sie ein Leistungsbudget definiert haben, ist es an der Zeit, den Build-Prozess einzurichten um sie im Auge zu behalten. Es gibt eine Reihe von Tools, mit denen Sie Grenzwerte festlegen können. für ausgewählte Leistungsmesswerte und warnt Sie, wenn Sie das Budget überschreiten. Mehr erfahren wie Sie die richtige Wahl treffen. 🕵️‍♀️

Lighthouse-Leistungsbudgets

Lighthouse ist ein Prüftool, mit dem Websites in einigen wichtigen Bereichen getestet werden: Leistung, Zugänglichkeit, Best Practices und die Leistung der Website als progressive Webanwendung.

Mit der Befehlszeilenversion von Lighthouse (Version 5 und höher) können Sie Leistungsbudgets auf Basis folgender Daten festlegen:

Ressourcengröße
Ressourcenanzahl

Sie können Budgets für jeden der folgenden Ressourcentypen festlegen:

document
font
image
media
other
script
stylesheet
third-party
total

Budgets werden in einer JSON-Datei festgelegt und nach der Definition der neuen Option „Über Budget“ gibt an, ob Sie Beschränkungen überschreiten.

Bereich „Budgets“ im Lighthouse-Bericht — </ph> „Budgets“ im Lighthouse-Bericht

Tipps zur Leistung von Webpack

Webpack ist ein leistungsstarkes Build-Tool zur Optimierung der Codeübermittlung an die Nutzer. Außerdem können Leistungsbudgets auf Grundlage der Asset-Größe festgelegt werden.

Aktivieren Sie Leistungshinweise in webpack.config.js, um Befehlszeilenwarnungen oder -fehler zu erhalten, wenn Ihre Bundle-Größe das Limit überschreitet. So können Sie die Asset-Größen während der Entwicklung im Auge behalten.

Nach dem Build-Schritt gibt das Webpack eine Liste farblich gekennzeichneter Assets und ihrer Größen aus. Alles, was über dem Budget liegt, ist gelb markiert.

Webpack-Ausgabe, in der Bundle.js hervorgehoben wird — </ph> Die hervorgehobene Datei "bundle.js" übersteigt Ihr Budget

Das Standardlimit für Assets und Einstiegspunkte beträgt 250 KB. Sie können in der Konfigurationsdatei eigene Ziele festlegen.

Warnung zur Webpack-Bundle-Größe — </ph> Webpack-Bundle-Größenwarnung ⚠️

Die Budgets werden mit den nicht komprimierten Asset-Größen verglichen. Nicht komprimierte JavaScript-Größe hängt von der Ausführungszeit ab und die Ausführung großer Dateien kann lange dauern, insbesondere auf Mobilgeräten.

Empfehlung zur Leistungsoptimierung von Webpack — </ph> Bonusfunktion: Webpack warnt dich nicht nur, sondern gibt dir auch eine Empfehlung zum Verkleinern deiner Sets. 💁

Paketgröße

Bundlesize ist ein einfaches npm-Paket, mit dem die Asset-Größe mit einem von Ihnen festgelegten Grenzwert verglichen wird. Er kann lokal ausgeführt und in Ihre CI eingebunden werden.

Bundlesize-CLI

Führen Sie die Bundlesize-CLI aus. Geben Sie dazu einen Schwellenwert und die Datei an, die Sie testen möchten.

bundlesize -f "dist/bundle.js" -s 170kB

„Bundlesize“ gibt farbcodierte Testergebnisse in einer Zeile aus.

Fehlgeschlagener Bundlesize-CLI-Test — </ph> Bundlesize-CLI-Test fehlgeschlagen ❌

</ph> Bundlesize-CLI-Test erfolgreich durchlaufen ✔️

Paketgröße für CI

Sie holen den größtmöglichen Nutzen aus der Bundle-Größe heraus, wenn Sie es in eine CI einbinden, um Größenbeschränkungen für Pull-Anfragen automatisch durchzusetzen. Wenn der Bundlesize-Test fehlschlägt, wird die Pull-Anfrage nicht zusammengeführt. Es funktioniert für Pull-Anfragen auf GitHub mit Travis CI, CircleCI, Wercker und Drone.

</ph> Status der Paketgrößenprüfung auf GitHub

Möglicherweise haben Sie heute eine schnelle App, aber durch Hinzufügen von neuem Code kann dies häufig geändert werden. Wenn Sie Pull-Anfragen mit Bundlesize überprüfen, können Sie Leistungseinbußen vermeiden. Bootstrap, Tinder, Trivago und viele andere nutzen es, um ihr Budget zu kontrollieren.

Mit Bundlesize ist es möglich, Grenzwerte für jede Datei separat festzulegen. Dies ist besonders nützlich, wenn Sie ein Bundle in Ihrer Anwendung aufteilen.

Standardmäßig werden mit gzip komprimierte Asset-Größen getestet. Mit der Komprimierungsoption können Sie zur Brotli-Komprimierung wechseln oder sie vollständig deaktivieren.

Lighthouse-Bot

Lighthouse Bot lässt sich in Travis CI einbinden und legt die Budgets auf Basis einer der fünf Lighthouse-Audit-Kategorien fest. Beispiel: Ein Budget von 100 für die Lighthouse-Leistungsbewertung. Manchmal ist es einfacher, eine einzige Zahl im Auge zu behalten, als bei einzelnen Asset-Budgets und bei Lighthouse-Werten vieles berücksichtigt wird.

Der Lighthouse-Bot führt eine Prüfung durch, nachdem Sie eine Website auf dem Staging-Server bereitgestellt haben. Legen Sie in .travis.yml Budgets für bestimmte Lighthouse-Kategorien mit den Optionen --perf, --a11y, --bp, --seo oder --pwa fest. Versuche, mit einem Wert von mindestens 90 in der grünen Zone zu bleiben.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Wenn die Punktzahlen für eine Pull-Anfrage auf GitHub unter den von Ihnen festgelegten Grenzwert fallen, kann der Lighthouse-Bot verhindern, dass Pull-Anfragen zusammengeführt werden. ⛔

</ph> Status der Lighthouse-Bot-Prüfung auf GitHub

Der Lighthouse-Bot kommentiert Ihre Pull-Anfrage anschließend mit aktualisierten Werten. Dies ist eine praktische Funktion, die Diskussionen über die Leistung anregt, wenn Codeänderungen auftreten.

Lighthouse-Berichtsergebnisse bei Pull-Anfrage — </ph> Lighthouse-Berichtswerte für Pull-Anfragen 💬

Wenn Ihre Pull-Anfrage aufgrund eines schlechten Lighthouse-Scores blockiert wird, können Sie eine Prüfung mit der Lighthouse-Befehlszeile oder in den Entwicklertools durchführen. Es wird ein Bericht mit Details zu Engpässen und Hinweisen für einfache Optimierungen erstellt.

Zusammenfassung

Tool	Befehlszeile	CI	Zusammenfassung
Leuchtturm	✔️	❌ Vorstellung	Budgets für verschiedene Arten von Ressourcen auf Basis ihrer Größe oder Anzahl.
Webpack	✔️	❌ Vorstellung	Budgets basieren auf der Größe der mit dem Webpack generierten Assets. Prüft unkomprimierte Größen.
Bundlesize	✔️	✔️	Budgets auf Basis der Größe spezifischer Ressourcen Prüft komprimierte und unkomprimierte Größen.
Lighthouse-Bot	❌ Vorstellung	✔️	Budgets auf Basis von Lighthouse-Bewertungen.