Leistungsbudgets mit Webpack festlegen

Milica Mihajlija

Webpack kombiniert alle importierten Dateien und packt sie in eine oder mehrere Ausgabedateien, die als Bundles bezeichnet werden. Bundling ist praktisch, aber wenn Ihre App wächst, werden auch Ihre Bundles größer. Sie müssen die Bundle-Größen im Blick behalten, damit sie nicht zu groß werden und die Ladezeit Ihrer Anwendung beeinträchtigen. Webpack unterstützt das Festlegen von Leistungsbudgets basierend auf der Asset-Größe und kann die Bundle-Größen für Sie im Blick behalten.

Hier sehen Sie eine App, die die Tage bis zum Jahresende zählt. Sie wurde mit React und moment.js erstellt. Das ist ähnlich wie bei realen Apps, die zunehmend auf Frameworks und Bibliotheken basieren. 😉)

Messen

In diesem Codelab ist die App bereits mit webpack gebündelt.

1. Klicken Sie auf Remix to Edit (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 Vollbildoption verwenden.
3. Wenn Sie eine farblich codierte Liste der Assets und ihrer Größen abrufen möchten, geben Sie webpack in die Konsole ein.

webpack

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

Diese Warnungen sind im Produktionsmodus standardmäßig aktiviert. Der Standardschwellenwert ist 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 gibt nicht nur eine Warnung aus, sondern auch eine Empfehlung, wie Sie Ihre Bundles verkleinern können. Weitere Informationen zu den empfohlenen Techniken

Benutzerdefiniertes Leistungsbudget festlegen

Ein angemessenes Leistungsbudget hängt von der Art Ihres Projekts ab. Am besten recherchieren Sie selbst. Eine gute Faustregel ist, weniger als 170 KB an komprimierten/minimierten Ressourcen des kritischen Pfads bereitzustellen.

Für diese einfache Demo sollten Sie noch konservativer sein 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.

Folgende Werte sind für hints möglich:

1. warning (Standard): Es wird eine gelbe Warnmeldung angezeigt, der Build wird jedoch ausgeführt. Am besten verwenden Sie diese Funktion in Entwicklungsumgebungen.
2. error: Es wird eine rote Fehlermeldung angezeigt, der Build wird aber trotzdem bestanden. Diese Einstellung wird für Produktions-Builds 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 entwickeln, und einige Techniken führen zu schnelleren Ladezeiten. Viele davon sind direkt hier unter JavaScript optimieren dokumentiert. 🤓)

Frameworks und Bibliotheken erleichtern Entwicklern die Arbeit, aber Endnutzer interessieren sich nicht wirklich dafür, wie Apps erstellt werden. Sie möchten nur, dass sie funktional und schnell sind. Wenn Sie das Leistungsbudget überschreiten, ist es an der Zeit, über mögliche Optimierungen nachzudenken.

In der Praxis lassen sich große clientseitige Frameworks in der Regel nur schwer austauschen. Daher ist es wichtig, sie mit Bedacht einzusetzen. Mit etwas Recherche finden Sie oft kleinere Alternativen zu beliebten Bibliotheken, die genauso gut funktionieren (date-fns ist eine gute Alternative zu moment.js). Manchmal ist es sinnvoller, ein Framework oder eine Bibliothek gar nicht zu verwenden, wenn sie sich erheblich auf die Leistung auswirkt.

Durch das Entfernen von nicht verwendetem Code lassen sich Apps mit großen Drittanbieterbibliotheken optimieren. Im Leitfaden zum Entfernen von nicht verwendetem Code wird dieser Prozess ausführlich beschrieben. Hier finden Sie eine schnelle Möglichkeit, den Countdown-Code ohne 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 diese Zeile:

const moment = require('moment');

Das erfordert etwas Mathematik, aber Sie können denselben Countdown mit reinem 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.

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

Überwachen

Das Einrichten eines Leistungsbudgets in webpack erfordert nur wenige Zeilen Code. Sie werden gewarnt, wenn Sie versehentlich eine große Abhängigkeit hinzufügen. „Aus den Augen, aus dem Sinn“ heißt es, aber webpack kann dafür sorgen, dass Sie sich jederzeit der Auswirkungen auf die Leistung bewusst sind.