App überwachen und analysieren

Welche Tools können Sie verwenden, um das webpack-Bundle im Blick zu behalten und zu analysieren?

Ivan Akulov

Auch wenn Sie webpack so konfigurieren, dass die App so klein wie möglich ist, ist es wichtig, sie im Auge zu behalten und zu wissen, was sie enthält. Andernfalls können Sie eine Abhängigkeit installieren, durch die die App doppelt so groß wird und gar nicht bemerkt wird.

In diesem Abschnitt werden Tools beschrieben, mit denen Sie Ihr Paket besser verstehen können.

Größe des Bundles im Blick behalten

Verwenden Sie zum Überwachen der Anwendungsgröße während der Entwicklung webpack-dashboard und bundlesize auf CI.

Webpack-Dashboard

webpack-dashboard ergänzt die webpack-Ausgabe um die Größe von Abhängigkeiten, den Fortschritt und andere Details. Das Ganze sieht dann so aus:

Dieses Dashboard hilft Ihnen, große Abhängigkeiten im Blick zu behalten. Wenn Sie eine hinzufügen, wird sie sofort im Bereich Module angezeigt.

Installieren Sie das Paket webpack-dashboard, um die Funktion 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 du einen Express-basierten Dev-Server verwendest:

compiler.apply(new DashboardPlugin());

Sie können das Dashboard gerne ausprobieren, um die wahrscheinlichen Verbesserungsmöglichkeiten zu finden. Scrollen Sie beispielsweise durch den Bereich Module, um herauszufinden, welche Bibliotheken zu groß sind und durch kleinere Alternativen ersetzt werden könnten.

Bundlesize

Mit bundlesize wird geprüft, ob webpack-Assets die angegebenen Größen nicht überschreiten. Integrieren Sie es in eine CI, um benachrichtigt zu werden, wenn die App zu groß wird:

So konfigurieren Sie sie:

Maximale Größen

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

2. Fügen Sie package.json den Abschnitt bundlesize mit dem folgenden Inhalt hinzu:

   // 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. Fügen Sie jeder Größe 10–20% hinzu, um die maximalen Größen zu erhalten. Mit diesem Spielraum von 10–20% können Sie die App wie gewohnt entwickeln und werden gewarnt, wenn die Größe zu groß wird.

   bundlesize aktivieren

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

   npm install bundlesize --save-dev
   

6. Geben Sie im Abschnitt bundlesize im Bereich package.json die konkreten maximalen Größen an. Für einige Dateien (z.B. Bilder) können Sie die maximale Größe pro Dateityp angeben, nicht pro Datei:

   // 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-Script hinzu, um die Prüfung auszuführen:

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

8. Konfigurieren Sie die CI so, dass npm run check-size bei jedem Push 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, werden Sie feststellen, ob die Ausgabedateien klein genug sind:

Oder bei Fehlern:

Weitere Informationen

• Alex Russell über die Ladezeit, die wir anstreben sollten

Analysieren, warum das Paket so groß ist

Sie sollten sich das Paket genauer ansehen, um zu sehen, welche Module darin Platz belegen. webpack-bundle-analyzer:

(Bildschirmaufzeichnung von github.com/webpack-contrib/webpack-bundle-analyzer)

webpack-bundle-analyzer scannt das Bundle und erstellt eine Visualisierung des Inhalts. Mit dieser Visualisierung können Sie große oder unnötige Abhängigkeiten 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 den Produktionsbuild ausführen. Das Plug-in öffnet die Statistikseite in einem Browser.

Standardmäßig wird auf der Statistikseite die Größe der geparsten Dateien angezeigt (d.h. der Dateien, wie sie im Bundle angezeigt werden). Sie sollten die GZIP-Größen vergleichen, da diese der Erfahrung echter Nutzer näher kommen. Verwenden Sie die Seitenleiste links, um die Größen zu wechseln.

Hinweis : Wenn Sie das ModuleConcatenationPlugin verwenden, werden möglicherweise einige Module in der webpack-bundle-analyzer-Ausgabe zusammengeführt, wodurch der Bericht weniger detailliert ist. Wenn Sie dieses Plug-in verwenden, deaktivieren Sie es während der Analyse.

Darauf sollten Sie im Bericht achten:

• Große Abhängigkeiten Warum sind sie so groß? Gibt es kleinere Alternativen (z.B. Preact (anstelle von React)? Verwenden Sie den gesamten Code, z.B. Moment.js enthält viele Sprachen, die oft nicht verwendet werden und entfernt werden könnten.
• Duplizierte Abhängigkeiten: Wird dieselbe Bibliothek in mehreren Dateien wiederholt? Verwenden Sie dazu beispielsweise die Option optimization.splitChunks.chunks in Webpack 4 oder CommonsChunkPlugin in Webpack 3, um sie in eine gemeinsame Datei zu verschieben. Oder hat das Bundle mehrere Versionen derselben Bibliothek?
• Ähnliche Abhängigkeiten Gibt es ähnliche Bibliotheken, die ungefähr dieselbe Aufgabe erfüllen? (z.B. moment und date-fns oder lodash und lodash-es). Verwenden Sie möglichst immer dasselbe Tool.

Sehen Sie sich auch die hervorragende Analyse von webpack-Bundles von Sean Larkin an.

Zusammenfassung

• Mit webpack-dashboard und bundlesize die Größe Ihrer App im Blick behalten
• Finde mit webpack-bundle-analyzer heraus, wodurch sich die Größe erhöht