Vue CLI で作ったアプリのバンドルサイズを分析する Vue CLI Plugin Webpack Bundle Analyzer

Vue は Webpack でバンドル処理を行うので、Webpack Bundle Analyzer を組み込める。

Vue CLI で作ったプロジェクトの場合、コレを簡単に仕込める Vue CLI Plugin Webpack Bundle Analyzer というプラグインが存在する。

• GitHub - mrbbot/vue-cli-plugin-webpack-bundle-analyzer: 📊 vue-cli plugin to visualize size of webpack output files

Vue CLI 製のプロジェクトにて次のコマンドを実行するだけで良い。

$ vue add webpack-bundle-analyzer

ビルド後に結果ファイルが開かないよう、次のオプションを入れておく。

• vue.config.js

module.exports = {
  pluginOptions: {
    // ↓ コレを追加
    webpackBundleAnalyzer: {
      openAnalyzer: false
    }
  }

コレで

$ npm run build

を実行すると、ビルド時に一緒に ./dist/report.html が出力される。コレをブラウザで開けば、よく見かける Webpack Bundle Analyzer の画面が確認できる。