App überwachen und analysieren

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:

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:

So konfigurieren Sie es:

Maximal zulässige Größen ermitteln

1. Optimieren Sie die App, um sie so klein wie möglich zu halten. Führen Sie den Produktions-Build aus.

2. Fügen Sie den Abschnitt bundlesize mit folgendem Inhalt in package.json ein:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. 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
   

4. 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 aktivieren

5. Installieren Sie das Paket bundlesize als Entwicklungsabhängigkeit:

   npm install bundlesize --save-dev
   

6. Geben Sie im Abschnitt bundlesize der package.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",
       }
     ]
   }   
   

7. Fügen Sie ein npm-Skript hinzu, um die Prüfung auszuführen:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Konfigurieren Sie CI so, dass bei jedem Push npm run check-size ausgeführt wird. (Und integriere bundlesize 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:

Oder im Falle von Fehlern:

Weitere Informationen

• Alex Russell zur tatsächlichen Ladezeit, die wir anstreben sollten

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 – oder CommonsChunkPlugin 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 und date-fns oder lodash und lodash-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 und bundlesize, um über die Größe deiner App informiert zu sein
• Mit webpack-bundle-analyzer erfährst du mehr über die optimale Größe