Webpack Bundle Analyzer

Cet outil analyse les bundles Webpack à l’aide de stats.json pour révéler comment un bundle consomme son budget de taille. En ingérant un stats.json, il calcule les tailles par module, les répartitions des points d’entrée et un graphe de dépendances pour montrer d’où proviennent la plupart des octets. Conceptuellement, il traite une build comme un graphe où chaque nœud est un module et les arêtes représentent des importations; l’outil agrège les tailles le long des chemins pour mettre en évidence les modules lourds. Il prend en charge les modules CommonJS et ESM, les imports dynamiques et les artefacts de code-splitting. La sortie aide les ingénieurs frontend, les ingénieurs performance et les équipes plateforme à identifier des opportunités d’optimisation, comme supprimer des dépendances volumineuses, ajuster les plages de code-splitting ou remplacer des bibliothèques lourdes. Sa valeur unique réside dans une analyse rapide et locale sans service cloud, et dans des visualisations approfondies de la composition des entrées et des tendances au niveau des modules. Les fonctionnalités clés incluent la granularité par entrée, les principaux responsables, une répartition par package et par chemin, et un rapport exportable pour CI. Des cas d’usage typiques incluent l’optimisation d’une application SPA, l’audit des bundles fournisseurs à travers des micro-frontends, et la validation des budgets de performance dans les pipelines CI.