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.

</ph> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

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

</ph> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

</ph> . <ph type="x-smartling-placeholder">

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> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

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> <ph type="x-smartling-placeholder">

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.

</ph> <ph type="x-smartling-placeholder">

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