Formation Comprendre Webpack : Analyser les dépendances

Un des problème que l'on rencontre avec l'utilisation des modules en JavaScript est le poid du fichier en sortie. En effet on a très rapidement tendance à importer de multiples librairies (lodash, moment, react...) et à se retrouver avec des fichier js dépassant le Mo.

Webpack Bundle Analyzer, comme son nom l'indique, va vous permettre d'inspecter la proportion de vos dépendances.

Installation & Configuration

On commence par installer le plugin

npm i -D webpack-bundle-analyzer

On ajoute ensuite le plugin au niveau de notre configuration webpack

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

module.exports {
  // ...
  plugins: [new BundleAnalyzerPlugin()]
}

Par défaut, le plugin va démarrer un serveur qui écoutera sur le port 8888. Mais il est aussi possible de générer un rapport au format HTML

  new BundleAnalyzerPlugin({
    openAnalyzer: false,
    defaultSizes: 'gzip',
    analyzerMode: 'static'
  })