À propos de ce tutoriel
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'
})