Tools zum Nachverfolgen und Analysieren des Webpack-Bundles
Auch wenn Sie Webpack so konfigurieren, dass die App so klein wie möglich ist, ist es dennoch wichtig, den Überblick zu behalten und zu wissen, was es enthält. Andernfalls können Sie eine Abhängigkeit installieren, die die Anwendung doppelt so groß macht – und das gar nicht bemerkt.
In diesem Abschnitt werden Tools beschrieben, mit denen Sie sich über Ihr Set informieren können.
Paketgröße im Blick behalten
Verwenden Sie zum Überwachen der Anwendungsgröße während der Entwicklung das webpack-dashboard und für CI die Bundle-Größe.
Webpack-Dashboard
webpack-dashboard verbessert die Webpack-Ausgabe mit Umfang der Abhängigkeiten, Fortschritt und anderen Details. Das Ganze sieht dann so aus:
![Screenshot der Webpack-Dashboard-Ausgabe](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=6&hl=de)
Mit diesem Dashboard können Sie große Abhängigkeiten verfolgen. Wenn Sie eine hinzufügen, wird sie sofort im Abschnitt Module angezeigt.
Installieren Sie das Paket webpack-dashboard
, um es zu aktivieren:
npm install webpack-dashboard --save-dev
Fügen Sie das Plug-in im Abschnitt plugins
der Konfigurationsdatei hinzu:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
oder compiler.apply()
verwenden, wenn Sie einen Express-basierten Entwicklungsserver nutzen:
compiler.apply(new DashboardPlugin());
Probieren Sie das Dashboard einfach aus, um Verbesserungsmöglichkeiten zu finden. Scrollen Sie beispielsweise durch den Abschnitt Module, um zu ermitteln, welche Bibliotheken zu groß sind und durch kleinere Alternativen ersetzt werden können.
Paketgröße
bundlesize sorgt dafür, dass die Webpack-Assets die angegebenen Größen nicht überschreiten. Binden Sie eine CI ein, um benachrichtigt zu werden, wenn die Anwendung zu groß wird:
![Screenshot des CI-Abschnitts einer Pull-Anfrage auf GitHub Zu den CI-Tools gehört die Ausgabe „Bundlesize“](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=6&hl=de)
So konfigurieren Sie es:
Maximal zulässige Größen ermitteln
Optimieren Sie die App, um sie so klein wie möglich zu halten. Führen Sie den Produktions-Build aus.
Fügen Sie den Abschnitt
bundlesize
mit folgendem Inhalt inpackage.json
ein:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
Führen Sie
bundlesize
mit npx aus:npx bundlesize
Dadurch wird die mit gzip komprimierte Größe jeder Datei ausgegeben:
PASS ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB PASS ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB PASS ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB PASS ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
Addieren Sie 10 bis 20% zu jeder Größe, um die maximalen Größen zu erhalten. Mit einem Grenzwert von 10 bis 20% können Sie die App wie gewohnt entwickeln und erhalten eine Warnung, wenn ihre Größe zu stark ansteigt.
bundlesize
aktivierenInstallieren Sie das Paket
bundlesize
als Entwicklungsabhängigkeit:npm install bundlesize --save-dev
Geben Sie im Abschnitt
bundlesize
derpackage.json
die konkreten maximalen Größen an. Für einige Dateien (z.B. Bilder) kann es hilfreich sein, die maximale Größe pro Dateityp und nicht pro Datei anzugeben:// package.json { "bundlesize": [ { "path": "./dist/*.png", "maxSize": "16 kB", }, { "path": "./dist/main.*.js", "maxSize": "20 kB", }, { "path": "./dist/vendor.*.js", "maxSize": "35 kB", } ] }
Fügen Sie ein npm-Skript hinzu, um die Prüfung auszuführen:
// package.json { "scripts": { "check-size": "bundlesize" } }
Konfigurieren Sie CI so, dass bei jedem Push
npm run check-size
ausgeführt wird. (Und integrierebundlesize
in GitHub, wenn du das Projekt darauf entwickelst.)
Geschafft! Wenn Sie jetzt npm run check-size
ausführen oder den Code per Push übertragen, sehen Sie, ob die Ausgabedateien klein genug sind:
![Screenshot der „bundlesize“-Ausgabe Alle Build-Ergebnisse sind mit "Bestanden" gekennzeichnet.](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=6&hl=de)
Oder im Falle von Fehlern:
![Screenshot der „bundlesize“-Ausgabe Einige Build-Ergebnisse sind mit
„Fail“ (Nicht bestanden)](https://web.dev/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=6&hl=de)
Weitere Informationen
Analysieren, warum das Set so groß ist
Werfen Sie einen genaueren Blick auf das Paket, um herauszufinden, welche Module Platz nehmen. Wir stellen vor: webpack-bundle-analyzer:
webpack-bundle-analyzer scannt das Set und erstellt eine visuelle Darstellung dessen, was darin enthalten ist. Verwenden Sie diese Visualisierung, um große oder unnötige Abhängigkeiten zu finden.
Installieren Sie das Paket webpack-bundle-analyzer
, um das Analyse-Tool zu verwenden:
npm install webpack-bundle-analyzer --save-dev
Fügen Sie der Webpack-Konfiguration ein Plug-in hinzu:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
und führen Sie den Produktions-Build aus. Das Plug-in öffnet die Statistikseite in einem Browser.
Standardmäßig wird auf der Statistikseite die Größe der geparsten Dateien (d.h. der Dateien, wie sie im Bundle angezeigt werden) angezeigt. Wahrscheinlich möchten Sie die gzip-Größen vergleichen, da dies der Erfahrung realer Nutzer entspricht. Verwenden Sie die Seitenleiste auf der linken Seite, um die Größen zu ändern.
Der Bericht enthält Folgendes:
- Große Abhängigkeiten: Warum sind sie so groß? Gibt es kleinere Alternativen (z.B. „Preact“ anstelle von „React“)? Verwenden Sie den gesamten darin enthaltenen Code (z.B. Moment.js enthält viele Sprachen, die häufig nicht verwendet werden und ausgelassen werden könnten)?
- Duplizierte Abhängigkeiten: Wird dieselbe Bibliothek in mehreren Dateien wiederholt? Verwenden Sie z.B. die Option
optimization.splitChunks.chunks
– in Webpack 4 – oderCommonsChunkPlugin
in Webpack 3, um die Datei in eine gemeinsame Datei zu verschieben. Oder hat das Bundle mehrere Versionen derselben Bibliothek? - Ähnliche Abhängigkeiten: Gibt es ähnliche Bibliotheken, die ungefähr denselben Job ausführen? (z.B.
moment
unddate-fns
oderlodash
undlodash-es
). Versuchen Sie, bei einem einzigen Tool zu bleiben.
Sehen Sie sich auch Sean Larkins großartige Analyse von Webpack-Bundles an.
Zusammenfassung
- Verwende
webpack-dashboard
undbundlesize
, um über die Größe deiner App informiert zu sein - Mit
webpack-bundle-analyzer
erfährst du mehr über die optimale Größe