Analyser les dépendances

11min
il y a 8 ans
Sources du projet Télécharger la vidéo
Résumé Support

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' })