Corredor

ウェブ、プログラミングの勉強メモ。

2020-11-28 : このブログは2020年末をもって更新停止する予定です。
2021年以降は Neo's World (https://neos21.net/) で記事を公開していきますので、今後はコチラをご覧ください。
このブログの記事は2021年以降、Neo's World に順次移行していきます。元記事および本ブログは移行次第削除する予定です。

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

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

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

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 の画面が確認できる。