Tools zum Nachverfolgen und Analysieren des Webpack-Bundles
Auch wenn du das Webpack so konfigurierst, dass die App so klein wie möglich ist, ist es dennoch wichtig, und wissen, was darin enthalten ist. Andernfalls können Sie eine Abhängigkeit installieren, die dafür sorgt, doppelt so groß – und merkt sie gar nicht!
In diesem Abschnitt werden Tools beschrieben, mit denen Sie Ihr Paket besser verstehen können.
Paketgröße verfolgen
Verwenden Sie zur Überwachung der App-Größe webpack-dashboard für die Entwicklung und bundlesize auf CI.
webpack-dashboard
webpack-dashboard verbessert die Webpack-Ausgabe mit der Größe der Abhängigkeiten, dem Fortschritt und anderen Details. Das Ganze sieht dann so aus:
Dieses Dashboard hilft Ihnen, große Abhängigkeiten zu verfolgen. Wenn Sie eine hinzufügen, werden Sie sie sofort in im Abschnitt Module!
Installieren Sie das Paket webpack-dashboard
, um sie zu aktivieren:
npm install webpack-dashboard --save-dev
Fügen Sie das Plug-in dem Abschnitt plugins
der Konfiguration hinzu:
// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');
module.exports = {
plugins: [
new DashboardPlugin(),
],
};
oder compiler.apply()
, wenn Sie einen Express-basierten Entwicklertools verwenden:
compiler.apply(new DashboardPlugin());
Probieren Sie das Dashboard aus, um herauszufinden, wo sich wahrscheinlich verbessern lassen. Beispiel: Scrollen Sie durch den Abschnitt Modules (Module), um zu sehen, welche Bibliotheken zu groß sind und durch kleinere Alternativen.
Bundlesize
Mit bundlesize wird sichergestellt, dass die Webpack-Assets die die angegebenen Größen haben. Binden Sie es in ein CI ein, um benachrichtigt zu werden, wenn die Anwendung zu groß wird:
So konfigurieren Sie sie:
Maximalgrößen ermitteln
Optimieren Sie die App, damit sie so klein wie möglich ist. Führen Sie den Produktions-Build aus.
Fügen Sie den Abschnitt
bundlesize
inpackage.json
ein, indem Sie Folgendes eingeben: Inhalt:// 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
Wenn Sie zu jeder Größe 10–20% addieren, erhalten Sie die maximalen Größen. Mit dieser Marge von 10 bis 20 % die App wie gewohnt weiterzuentwickeln und Sie zu warnen, wenn sie zu stark wächst.
bundlesize
aktivierenInstallieren Sie das Paket
bundlesize
als Entwicklungsabhängigkeit:npm install bundlesize --save-dev
Geben Sie im Abschnitt
bundlesize
der Dateipackage.json
den konkreten Maximalgrößen. Für einige Dateien (z. B. Bilder) kann es sinnvoll sein, die maximale Größe pro Datei festzulegen. und nicht für jede Datei:// 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 die CI so, dass
npm run check-size
bei jedem Push 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-Befehl übertragen, sehen Sie, ob die Ausgabedateien
klein genug:
Oder bei Fehlern:
Weitere Informationen
- Alex Russell über die tatsächliche Ladezeit Ziel
Analysieren, warum das Set so groß ist
Du solltest dir das Paket genauer ansehen, um herauszufinden, welche Module Speicherplatz belegen. Google Meet webpack-bundle-analyzer:
<ph type="x-smartling-placeholder">Das Webpack-Bundle-Analysetool scannt das Bundle und erstellt eine Visualisierung des Inhalts. Verwenden um große oder unnötige Abhängigkeiten zu erkennen.
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 den Produktions-Build aus. Das Plug-in öffnet die Statistikseite in einem Browser.
Standardmäßig zeigt die Statistikseite die Größe der geparsten Dateien an, d.h. der Dateien, wie sie in des Pakets). Sie sollten die gzip-Größen vergleichen, da diese eher den tatsächlichen Nutzenden entsprechen. Erfahrung; können Sie in der linken Seitenleiste zwischen den Größen wechseln.
Darauf sollten Sie im Bericht achten:
- Große Abhängigkeiten. Warum sind sie so groß? Gibt es kleinere Alternativen (z.B. Vorbereiten statt React)? Verwenden Sie den gesamten darin enthaltenen Code (z.B. Moment.js enthält viele Sprachen, die häufig nicht verwendet werden und daher verworfen 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 – oder imCommonsChunkPlugin
– in Webpack 3, um sie in eine gemeinsame Datei zu verschieben.) Oder hat das Bundle mehrere Versionen der gleichen Bibliothek? - Ähnliche Abhängigkeiten. Gibt es ähnliche Bibliotheken, die ungefähr die gleiche Aufgabe erfüllen? (z.B.
moment
unddate-fns
oderlodash
undlodash-es
. Versuchen Sie, bei einem einzigen Tool zu bleiben.
Seht euch außerdem Sean Larkins aussagekräftige Analyse des Webpack- Sets
Zusammenfassung
- Mit
webpack-dashboard
undbundlesize
kannst du im Blick behalten, wie groß deine App ist. - Finde mit
webpack-bundle-analyzer
heraus, wodurch sich die Größe erhöht