console出力の削除

開発中にデバッグ目的で使用するconsole.log()は、本番環境では削除することが望ましいです。手動で削除するのは非効率的かつリスクがあるため、transform-remove-consoleプラグインを活用します。

1. プラグインのインストール

npm install babel-plugin-transform-remove-console --save-dev

2. Babel設定ファイルの更新

// babel.config.js
{
  "plugins": ["transform-remove-console"]
}

3. 必要に応じて環境によってプラグインを切り替える

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...prodPlugins
  ]
}

ルーティングの遅延読み込み

Vue Routerのルートコンポーネントを遅延読み込みすることで初期ロードを軽量化できます。Babelを使用している場合、動的インポートを正しく解析するために@babel/plugin-syntax-dynamic-importが必要です。

1. プラグインのインストール

npm install --save-dev @babel/plugin-syntax-dynamic-import

2. Babel設定ファイルに追加

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

3. ルート定義で動的インポートを使用

const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
const About = () => import(/* webpackChunkName: "about" */ '@/views/About.vue')

外部CDNの活用

Vue、Vue Router、Axiosなどの主要ライブラリをWebpackでバンドルせず、外部CDN経由で読み込むことでビルドサイズを削減できます。

1. vue.config.jsでの設定

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios'
      })
      config.plugin('html').tap(args => {
        args[0].isProduction = true
        return args
      })
    })
  }
}

2. public/index.htmlでCDNリンクを追加

<% if (htmlWebpackPlugin.options.isProduction) { %>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
<% } %>

サーバー側のGzip圧縮設定

Webサーバー（例：Nginx）でGzip圧縮を有効にすることで、転送量を削減できます。

gzip on;
gzip_min_length 1k;
gzip_comp_level 4;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;