ビルド最適化

16.3.1. チャンク分割戦略

大規模な依存関係は別チャンクに分離してキャッシュ効率を高めます。

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia'],
        ui: ['@vueuse/core'],
      },
    },
  },
},

• フレームワークのコアライブラリ（vue、vue-router、pinia）はvendorチャンクに分離します。
• 変更頻度の低い大規模ライブラリは別チャンクに分離します。
• ルートベースのコード分割はVue Routerの動的importを活用します。

---

16.3.2. ビルド分析

バンドルサイズを分析する際はrollup-plugin-visualizerを使用します。

yarn add -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({ open: true }),
  ],
})

---

16.3.3. ビルド検証基準

プロダクションビルド後、以下の項目を確認します。

項目	基準
初期ロードJSサイズ	300KB以下（gzip基準）
最大単一チャンクサイズ	500KB以下
ビルド警告	0件
ソースマップ	プロダクションで無効化

---

16.3.4. ツリーシェイキング

• ライブラリのimport時は使用する機能のみ個別にimportします。
• import * as構文はツリーシェイキングを妨げるため使用しません。

// 正しい例 — 個別import
import { ref, computed, watch } from 'vue'

// 誤った例 — 全体Import
import * as Vue from 'vue'