Quels outils utiliser pour suivre et analyser le pack Webpack ?
Même lorsque vous configurez Webpack pour rendre l'application aussi petite que possible, il est toujours important de suivre son évolution et de savoir ce qu'elle inclut. Sinon, vous pouvez installer une dépendance qui rendra l'application deux fois plus volumineuse, sans même la remarquer.
Cette section décrit les outils qui vous aideront à comprendre votre lot.
Effectuer le suivi de la taille du lot
Pour surveiller la taille de votre application, utilisez webpack-dashboard pendant le développement et bundlesize dans l'intégration continue.
tableau de bord-webpack
webpack-dashboard améliore la sortie de webpack avec la taille des dépendances, la progression et d'autres détails. Voici à quoi cela ressemble:
![Capture d'écran de la sortie de webpack-dashboard](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-webpack-3e248f1f172ea.png?authuser=8&hl=fr)
Ce tableau de bord permet de suivre les dépendances importantes. Si vous en ajoutez une, vous la verrez immédiatement dans 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 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 trouver 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 du pack Web ne dépassent pas les tailles spécifiées. Intégrez-la à un CI pour recevoir une notification lorsque l'application devient trop volumineuse:
![Capture d'écran de la section "CI" d'une demande d'extraction sur GitHub. Parmi les outils d'intégration continue, on trouve la sortie Bundlesize](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-ci-section-5283cb670e1d6.jpg?authuser=8&hl=fr)
Pour le configurer:
Identifier les tailles maximales
Optimisez l'application pour la rendre aussi petite que possible. Exécutez le build de production.
Ajoutez la section
bundlesize
danspackage.json
avec le contenu suivant:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
Exécutez
bundlesize
avec npx:npx bundlesize
La taille de chaque fichier compressée avec gzip 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
Ajoutez 10 à 20% à chaque taille pour obtenir le nombre maximal de tailles. Cette marge de 10 à 20% vous permettrait de développer l'application normalement tout en vous avertissant lorsque sa taille augmente trop.
Activer
bundlesize
Installez le package
bundlesize
en tant que dépendance de développement:npm install bundlesize --save-dev
Dans la section
bundlesize
du fichierpackage.json
, spécifiez les tailles maximales concrètes. Pour certains fichiers (par exemple, les images), vous pouvez spécifier la taille maximale par type de 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", } ] }
Ajoutez un script npm pour exécuter la vérification:
// package.json { "scripts": { "check-size": "bundlesize" } }
Configurez l'intégration continue pour qu'elle exécute
npm run check-size
à chaque transfert. (Et intégrezbundlesize
à GitHub si vous y développez le projet.)
Et voilà ! Désormais, si vous exécutez npm run check-size
ou transférez le code, vous verrez si les fichiers de sortie sont suffisamment petits:
![Capture d'écran de la sortie de bundlesize. Tous les résultats de compilation portent la mention "Conforme".](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-142fea0baa50c.png?authuser=8&hl=fr)
Ou, en cas d'échec:
![Capture d'écran de la sortie de bundlesize. Certains résultats de compilation sont marqués comme "Échec".](https://web.developers.google.cn/static/articles/monitor-and-analyze/image/a-screenshot-the-bundles-6ec1755da19dd.png?authuser=8&hl=fr)
Complément d'informations
- Alex Russell, à propos du temps de chargement réel à cibler
Analyser pourquoi le bundle est si volumineux
Vous pouvez examiner plus en détail le package afin d'identifier les modules qui prennent de la place. Voici webpack-bundle-Analyzer:
webpack-bundle-Analyzer analyse le bundle et crée une visualisation de son contenu. Utilisez cette visualisation pour identifier des 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 de webpack:
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
et exécuter la compilation de production. Le plug-in ouvre la page de statistiques dans un navigateur.
Par défaut, la page des statistiques indique la taille des fichiers analysés (c'est-à-dire des fichiers tels qu'ils apparaissent dans le groupe). Vous souhaiterez probablement comparer les tailles gzip, car elles se rapprochent de celles des utilisateurs réels. Modifiez les tailles à l'aide de la barre latérale de gauche.
Voici les informations à rechercher dans le rapport:
- Dépendances volumineuses : Pourquoi sont-ils si grands ? Existe-t-il des alternatives plus petites (par exemple, Preact au lieu de React) ? Utilisez-vous tout le code qu'il contient (par exemple, Moment.js inclut de nombreux paramètres régionaux qui ne sont souvent pas utilisés et qui pourraient être supprimés) ?
- Dépendances en double. Une même bibliothèque est-elle répétée dans plusieurs fichiers ? (Utilisez, par exemple, l'option
optimization.splitChunks.chunks
(dans le pack Web 4) ou l'optionCommonsChunkPlugin
du pack Web 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 approximativement le même travail ? (par exemple,
moment
etdate-fns
, oulodash
etlodash-es
). Essayez de vous limiter à un seul outil.
Consultez également l'excellente analyse de Sean Larkin sur les packs webpack.
Récapitulatif
- Utilisez
webpack-dashboard
etbundlesize
pour connaître la taille de votre application - Examinez en détail les éléments qui constituent la taille avec
webpack-bundle-analyzer
.