Surveiller et analyser l'application

Outils à utiliser pour suivre et analyser le bundle webpack

Ivan Akulov

Même si vous configurez webpack pour réduire au maximum la taille de l'application, il est important de conserver le suivre et savoir ce qu’il inclut. Sinon, vous pouvez installer une dépendance qui rendra le deux fois plus grande, sans même vous en rendre compte.

Cette section décrit les outils qui vous aideront à comprendre votre bundle.

Effectuez le suivi de la taille du lot

Pour surveiller la taille de votre application, utilisez webpack-dashboard pendant le développement et bundlesize sur CI.

webpack-dashboard

webpack-dashboard améliore les résultats Webpack ; avec les tailles des dépendances, la progression et d'autres détails. Voici comment cela se présente:

Ce tableau de bord permet de suivre les dépendances importantes. Si vous en ajoutez une, vous la verrez immédiatement la section Modules.

Pour l'activer, installez le package webpack-dashboard:

npm install webpack-dashboard --save-dev

Ajoutez le plug-in dans la section plugins de la configuration:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

Ou utilisez compiler.apply() si vous utilisez un serveur de développement basé sur Express:

compiler.apply(new DashboardPlugin());

N'hésitez pas à jouer avec le tableau de bord pour identifier les points à améliorer. Par exemple : Faites défiler la section Modules pour identifier les bibliothèques trop volumineuses qui pourraient être remplacées par des alternatives plus petites.

taille du lot

bundlesize vérifie que les éléments webpack ne dépassent pas les tailles spécifiées. Intégrez-le à un CI pour être averti lorsque l'application devient trop volumineuse:

Pour le configurer:

Découvrir les tailles maximales

1. Optimiser l'application pour qu'elle soit la plus petite possible. Exécutez le build de production.

2. Ajoutez la section bundlesize dans package.json avec le code suivant : contenu:

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

3. Exécutez bundlesize avec npx:

   npx bundlesize
   

   La taille compressée avec gzip de chaque fichier s'affiche:

   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. Ajoutez 10 à 20% à chaque taille pour obtenir le nombre maximal de tailles. Cette marge de 10 à 20% vous permettrait développer l'application comme d'habitude, tout en vous avertissant lorsque sa taille augmente trop.

   Activer bundlesize

5. Installez le package bundlesize en tant que dépendance de développement:

   npm install bundlesize --save-dev
   

6. Dans la section bundlesize du fichier package.json, spécifiez l'objet concret tailles maximales. Pour certains fichiers (les images, par exemple), vous pouvez spécifier la taille maximale par fichier. et non pour chaque fichier:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. Ajoutez un script npm pour exécuter la vérification:

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

8. Configurez l'intégration continue (CI) pour qu'elle exécute npm run check-size à chaque transfert. (et intégrez bundlesize à GitHub si vous développez le projet sur celui-ci.)

Et voilà ! Si vous exécutez npm run check-size ou transférez le code, vous verrez si les fichiers de sortie sont assez petite:

Ou, en cas d'échec:

Documentation complémentaire

• Alex Russell sur le temps de chargement réel cible

Analyser les raisons pour lesquelles le bundle est si volumineux

Vous pouvez approfondir le sujet pour voir quels modules prennent de la place. Meet webpack-bundle-analyzer:

webpack-bundle-analyzer analyse le bundle et crée une visualisation de son contenu. Utiliser ceci pour identifier les dépendances importantes ou inutiles.

Pour utiliser l'analyseur, installez le package webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

Ajoutez un plug-in à la configuration webpack:

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

et exécuter le build de production. Le plug-in ouvre la page des statistiques dans un navigateur.

Par défaut, la page de statistiques indique la taille des fichiers analysés (c'est-à-dire des fichiers tels qu'ils apparaissent dans dans le bundle). Nous vous conseillons de comparer les tailles gzip, car elles sont plus proches de celles des véritables utilisateurs expérience ; utilisez la barre latérale de gauche pour changer les tailles.

Voici ce que vous pouvez rechercher dans le rapport:

• Dépendances volumineuses. Pourquoi sont-ils si grands ? Existe-t-il des alternatives plus petites (par exemple, Préaction au lieu de React) ? Utilisez-vous tout le code qu'il contient (par exemple, Moment.js inclut de nombreux paramètres régionaux qui sont rarement utilisés et risquent d'être abandonnés) ?
• Dépendances en double. La même bibliothèque apparaît-elle dans plusieurs fichiers ? (Utilisez, par exemple, l'option optimization.splitChunks.chunks (dans webpack 4) ou CommonsChunkPlugin ; dans webpack 3, pour le déplacer dans un fichier commun.) Ou le bundle a-t-il plusieurs versions de la même bibliothèque ?
• Dépendances similaires. Existe-t-il des bibliothèques similaires qui effectuent à peu près le même travail ? (Ex. : moment et date-fns, ou lodash et lodash-es.) Essayez de vous en tenir à un seul outil.

Consultez également l'analyse approfondie de webpack de Sean Larkin, groupes.

Récapitulatif

• Utilisez webpack-dashboard et bundlesize pour connaître la taille de votre application
• Découvrez ce qui augmente la taille avec webpack-bundle-analyzer