Utilisation de webpack-bundle-analyzer pour optimiser notre application vuejs

Quelle est la première chose à faire avant d’utiliser webpack-bundle-analyzer ?

Pour utiliser webpack-bundle-analyzer il faut dans un premier temps l’installer en utilisant la commande ci-dessous.

npm install --save-dev webpack-bundle-analyzer

Ce plugin très pratique est un module npm qui est utilisable grâce à un autre outil: webpack. Étant donné que vuejs utilise webpack il est possible d’exploiter la puissance de webpack-bundle-analyzer.

Initialiser le plugin

Dans le fichier webpack.config.js il faut importer le module dans une variable pour ensuite l’instancier dans la propriété "plugins".

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

module.exports = {

  // ...

  plugins: [

    new BundleAnalyzerPlugin({

    })

  ]

  // ...

}

Il est possible d’utiliser des options.

Utilisation du plugin pour optimiser notre application vuejs

Sur vuejs pour utiliser l’outil webpack-bundle-analyzer afin de l’optimiser, il vous suffit de lancer l’application dans votre terminal.

npm run dev

Le résultat devrait apparaître sur votre navigateur. À défaut il y a un lien générer dans votre terminal que vous devez utiliser pour exécuter webpack-bundle-analyzer. Le programme représente les modules utilisés par des carrés. La taille du carré correspond au poids du module.

Dans l’exemple ci-dessus, on peut s’apercevoir que le module lodash.js est celui qui est le plus lourd.