App überwachen und analysieren

Tools zum Nachverfolgen und Analysieren des Webpack-Bundles

Ivan Akulov

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 die App doppelt so groß macht – und Sie werden es nicht einmal bemerken.

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 während der Entwicklung 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 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 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. 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 die Funktion:

Maximalgrößen ermitteln

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. Wenn Sie zu jeder Größe 10–20% addieren, erhalten Sie die maximalen Größen. 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 package.json die konkreten maximalen Größen an. 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",
       }
     ]
   }   
   

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-Befehl übertragen, sehen Sie, ob die Ausgabedateien klein genug:

Oder bei Fehlern:

Weitere Informationen

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

Analysieren, warum das Paket so groß ist

Du solltest dir das Paket genauer ansehen, um herauszufinden, welche Module Speicherplatz 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. 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. experience; können Sie in der linken Seitenleiste zwischen den Größen wechseln.

Hinweis: Wenn Sie das ModuleConcatenationPlugin verwenden, kann es sein, dass ein Teil von Modulen in der Ausgabe des Webpack-Bundle-Analysators zusammengeführt wird, wodurch der Bericht weniger detailliert wird. 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. Vorbereiten statt React)? Verwenden Sie den gesamten 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 im CommonsChunkPlugin – 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 und date-fns oder lodash und lodash-es. Versuchen Sie, bei einem einzigen Tool zu bleiben.

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
• Größe von webpack-bundle-analyzer analysieren