Leistungsbudgets mit Webpack festlegen

Milica Mihajlija

Webpack fasst alle Ihre importierten Dateien zusammen und verpackt sie in einer oder mehreren Ausgabedateien, die als Bundles bezeichnet werden. Das Erstellen von Sets ist praktisch, aber wenn Ihre App wächst, wachsen auch Ihre Bundles. Sie müssen die Bundle-Größen überwachen, damit sie nicht zu groß werden und sich auf die Ladezeit Ihrer Anwendung auswirken. Webpack unterstützt das Festlegen von Leistungsbudgets auf Basis der Asset-Größe und kann die Paketgrößen für Sie im Auge behalten.

Hier ist eine App, mit der die verbleibenden Tage bis Neujahr gezählt werden. Sie basiert auf React und moment.js. (Genau wie echte Apps, die zunehmend auf Frameworks und Bibliotheken basieren. 😉)

Messen

Dieses Codelab enthält bereits die im Webpack gebündelte App.

1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
2. Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
3. Geben Sie in der Konsole webpack ein, um eine farbcodierte Liste der Assets und ihrer Größen aufzurufen.

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 und 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 findest du in den Web Fundamentals.

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 kritischen Pfaden bereitzustellen.

Versuchen Sie es in dieser einfachen Demo noch konservativer und legen Sie das Budget auf 100 KB (97, 7 KiB) fest. Fügen Sie in webpack.config.js Folgendes hinzu:

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

Das neue Leistungsbudget ist 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 fungiert.

Mögliche Werte für hints sind:

1. warning (Standard): Es wird eine gelbe Warnmeldung angezeigt, der Build wird aber erfolgreich ausgeführt. Es empfiehlt sich, diese Methode in Entwicklungsumgebungen zu verwenden.
2. error: Es wird eine rote Fehlermeldung angezeigt, der Build wird aber trotzdem erfolgreich ausgeführt. Diese Einstellung wird für Produktions-Builds empfohlen.
3. false: Es werden keine Warnungen oder Fehler angezeigt.

Optimieren

Der Zweck eines Leistungsbudgets besteht darin, Sie vor Leistungsproblemen zu warnen, bevor diese zu schwer zu beheben sind. Es gibt immer mehrere Möglichkeiten, eine Anwendung zu erstellen, und einige Techniken sorgen für schnellere Ladezeiten. Viele davon sind direkt unter JavaScript optimieren dokumentiert. 🤓)

Frameworks und Bibliotheken erleichtern Entwicklern das Leben, aber Endnutzern ist nicht wichtig, wie Apps erstellt werden, sondern nur, dass sie funktionieren und schnell sind. Wenn das Leistungsbudget überschritten wird, sollten Sie über mögliche Optimierungen nachdenken.

In der Praxis lassen sich große clientseitige Frameworks normalerweise nur schwer austauschen. Daher ist es wichtig, sie mit Bedacht einzusetzen. Mit ein wenig Recherche finden Sie oft kleinere Alternativen zu beliebten Bibliotheken, die diese Aufgabe ebenfalls erfüllen (date-fns ist eine gute Alternative zu moment.js). Manchmal ist es sinnvoller, ein Framework oder eine Bibliothek überhaupt nicht zu verwenden, wenn dies erhebliche Auswirkungen auf die Leistung hat.

Das Entfernen von nicht verwendetem Code ist eine gute Möglichkeit, Anwendungen mit großen Drittanbieterbibliotheken zu optimieren. Im Leitfaden zum Entfernen von nicht verwendetem Code wird dieser Vorgang ausführlich erläutert. Hier finden Sie eine schnelle Möglichkeit, den Countdown-Code ohne „moment.js“ umzuschreiben.

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

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

Und löschen Sie diese Zeile:

const moment = require('moment');

Es erfordert ein wenig Mathematik, aber Sie können den gleichen Countdown mit einfachem 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 jetzt moment.js aus package.json und führen Sie Webpack noch einmal in der Console aus, um das optimierte Bundle zu erstellen.

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

Überwachen

Das Einrichten eines Leistungsbudgets in Webpack erfordert nur wenige Codezeilen. Sie werden gewarnt, wenn Sie (versehentlich) eine große Abhängigkeit verursachen. Diese Aussage fällt einfach aus dem Sinn, aber Webpack kann dafür sorgen, dass Sie sich jederzeit über die Auswirkungen auf die Leistung im Klaren sind.