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

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

2. Fügen Sie den Abschnitt bundlesize in package.json ein, indem Sie Folgendes eingeben: Inhalt:

   // 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 dieser Marge von 10 bis 20 % die App wie gewohnt weiterzuentwickeln und Sie zu warnen, wenn sie zu stark wächst.

   bundlesize aktivieren

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

   npm install bundlesize --save-dev
   

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

7. Fügen Sie ein npm-Skript 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 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">

</ph>

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

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.

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

Seht euch außerdem Sean Larkins aussagekräftige Analyse des Webpack- Sets

Zusammenfassung

• Mit webpack-dashboard und bundlesize kannst du im Blick behalten, wie groß deine App ist.
• Finde mit webpack-bundle-analyzer heraus, wodurch sich die Größe erhöht