Leistungsbudgets mit Webpack festlegen

Milica Mihajlija

Webpack kombiniert alle importierten Dateien und verpackt sie in eine oder mehrere Ausgabedateien, die als Bundles bezeichnet werden. Bündel sind praktisch, aber wenn Ihre App wächst, wachsen auch Ihre Bündel. Sie müssen die Bundle-Größen im Blick behalten, damit sie nicht zu groß werden und sich auf das Laden Ihrer Anwendung auswirken. Webpack unterstützt das Festlegen von Leistungsbudgets basierend auf der Asset-Größe und kann die Bundle-Größen im Auge behalten.

Hier ist eine App, die die Tage bis zum Neujahr zählt, um zu veranschaulichen, wie das funktioniert. Sie wurde mit React und moment.js erstellt. (Genau wie bei echten Apps, die zunehmend auf Frameworks und Bibliotheken angewiesen sind. 😉)

Messen

Dieses Codelab enthält bereits die mit webpack gebundelte App.

1. Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
3. Wenn du eine farbcodierte Liste der Assets und ihrer Größen aufrufen möchtest, gib in der Console webpack ein.

webpack

Das Hauptbundle ist gelb hervorgehoben, da es größer als 244 KiB (250 KB) ist.

Diese Warnungen sind im Produktionsmodus standardmäßig aktiviert. Der Standardgrenzwert beträgt 244 KiB unkomprimiert, sowohl für Assets als auch für Einstiegspunkte (die Kombination aller Assets, die beim ersten Laden einer Seite verwendet werden).

Webpack warnt Sie nicht nur, sondern gibt Ihnen auch eine Empfehlung, wie Sie Ihre Bundles verkleinern können. Weitere Informationen zu den empfohlenen Techniken finden Sie unter Web Fundamentals.

Benutzerdefiniertes Leistungsbudget festlegen

Das passende Leistungsbudget hängt von der Art Ihres Projekts ab. Am besten informieren Sie sich selbst. Als Faustregel gilt: Die komprimierten/minimierten Ressourcen des kritischen Pfads dürfen nicht mehr als 170 KB betragen.

Für diese einfache Demo sollten Sie noch konservativer vorgehen und das Budget auf 100 KB (97, 7 KiB) festlegen. Fügen Sie in webpack.config.js Folgendes hinzu:

module.exports = {
  //...
  performance: {
    maxAssetSize: 100000,
    maxEntrypointSize: 100000,
    hints: "warning"
  }
};

Das neue Leistungsbudget wird in Byte festgelegt:

• 100.000 Byte für einzelne Assets (maxAssetSize)
• 100.000 Byte für den Einstiegspunkt (maxEntrypointSize)

In diesem Fall gibt es nur ein Bundle, das auch als Einstiegspunkt dient.

Mögliche Werte für hints:

1. warning (Standard): Es wird eine gelbe Warnmeldung angezeigt, aber der Build wird bestanden. Sie sollten diese Funktion am besten in Entwicklungsumgebungen verwenden.
2. error: Es wird eine rote Fehlermeldung angezeigt, der Build wird aber trotzdem bestanden. Diese Einstellung wird für Produktionsbuilds empfohlen.
3. false: Es werden keine Warnungen oder Fehler angezeigt.

Optimieren

Ein Leistungsbudget soll Sie vor Leistungsproblemen warnen, bevor sie zu schwer zu beheben sind. Es gibt immer mehr als eine Möglichkeit, eine App zu erstellen, und einige Techniken sorgen für kürzere Ladezeiten. Viele davon sind hier im Artikel JavaScript optimieren dokumentiert. 🤓)

Frameworks und Bibliotheken erleichtern Entwicklern die Arbeit, aber Endnutzern ist es nicht wirklich wichtig, wie Apps erstellt werden, sondern nur, dass sie funktionsfähig und schnell sind. Wenn Sie das Leistungsbudget überschreiten, sollten Sie über mögliche Optimierungen nachdenken.

In der Praxis sind große clientseitige Frameworks in der Regel nur schwer zu ersetzen. Daher ist es wichtig, sie mit Bedacht einzusetzen. Mit ein wenig Recherche finden Sie oft kleinere Alternativen zu beliebten Bibliotheken, die die Aufgabe genauso gut erledigen. date-fns ist eine gute Alternative zu moment.js. Manchmal ist es sinnvoller, ein Framework oder eine Bibliothek gar nicht zu verwenden, wenn es erhebliche Auswirkungen auf die Leistung hat.

Das Entfernen nicht verwendeten Codes ist eine gute Möglichkeit, Apps zu optimieren, die große Bibliotheken von Drittanbietern enthalten. Im Leitfaden zum Entfernen nicht verwendeten Codes wird dieser Vorgang ausführlich erläutert. Hier ist eine schnelle Möglichkeit, den Countdown-Code ohne Verwendung von moment.js neu zu schreiben.

Entfernen Sie in app/components/Countdown.jsx Folgendes:

const today = moment();
const yearEnd = moment().endOf('year');
const daysLeft = yearEnd.diff(today, 'days');

Löschen Sie auch diese Zeile:

const moment = require('moment');

Es erfordert ein wenig Mathematik, aber Sie können denselben Countdown auch mit Vanilla-JavaScript implementieren:

const today = new Date();
const year = today.getFullYear();
const yearEnd = new Date(year,11,31); //months are zero indexed in JS
const timeDiff = Math.abs(yearEnd.getTime() - today.getTime());
const daysLeft = Math.ceil(timeDiff / (1000 * 3600 * 24));

Entfernen Sie nun moment.js aus package.json und führen Sie webpack noch einmal in der Konsole aus, um das optimierte Bundle zu erstellen.

Fertig! Sie haben 223 KiB (230 KB) eingespart und die App liegt unter dem Budget.🎉

Überwachen

Für die Einrichtung eines Leistungsbudgets in webpack sind nur wenige Codezeilen erforderlich. Außerdem werden Sie gewarnt, wenn Sie versehentlich eine große Abhängigkeit hinzufügen. Wie heißt es so schön: „Aus den Augen, aus dem Sinn“. Mit Webpack können Sie sich aber jederzeit über die Leistungsauswirkungen informieren.