App überwachen und analysieren

Tools zum Nachverfolgen und Analysieren des Webpack-Bundles

Ivan Akulov

Auch wenn Sie webpack so konfigurieren, dass die App so klein wie möglich ist, ist es wichtig, die Größe im Blick zu behalten und zu wissen, was sie umfasst. 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 Bundle besser verstehen können.

Bundle-Größe im Blick behalten

Verwenden Sie webpack-dashboard während der Entwicklung und bundlesize in der CI, um die Größe Ihrer App zu überwachen.

webpack-dashboard

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

Mit diesem Dashboard lassen sich große Abhängigkeiten nachverfolgen. Wenn Sie eine hinzufügen, wird sie sofort im Bereich Module angezeigt.

Installieren Sie das Paket webpack-dashboard, um es 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 auf Express basierenden Entwicklungsserver verwenden:

compiler.apply(new DashboardPlugin());

Sie können das Dashboard gerne ausprobieren, um mögliche Verbesserungsbereiche 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 die Webpack-Assets die angegebenen Größen nicht überschreiten. Integrieren Sie es in ein CI-System, um benachrichtigt zu werden, wenn die App zu groß wird:

So konfigurieren Sie es:

Maximale Größen herausfinden

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 mit dem folgenden Inhalt in package.json ein:

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

3. Führen Sie bundlesize mit npx aus:

   npx bundlesize
   

   Dadurch wird die gezippte 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 jeder Größe 10–20% hinzufügen, erhalten Sie die maximalen Größen. Mit dieser Spanne von 10 bis 20% können Sie die App wie gewohnt entwickeln und werden gewarnt, wenn die Größe zu stark zunimmt.

   bundlesize aktivieren

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