コード分割

21.2.1. ルートベース分割

ルート単位でコードを分割し、初期読み込みに必要な JavaScript サイズを最小化しなければなりません。

const routes = [
  { path: '/dashboard', component: () => import('@/pages/DashboardPage.vue') },
  { path: '/settings', component: () => import('@/pages/SettingsPage.vue') },
]

• すべてのルートコンポーネントは () => import() パターンを使用して動的に読み込まなければなりません。
• 静的 import でルートコンポーネントを登録することは許容されません。
• ビルドツールがルートごとのチャンクを自動生成するよう設定しなければなりません。
• 初期エントリーポイント（entry point）の JavaScript サイズを最小化して最初のページ読み込み速度を確保しなければなりません。

---

21.2.2. 動的 import

特定の条件でのみ必要な機能は動的 import() を使用して条件付きで読み込まなければなりません。

// 管理者専用機能の条件付き読み込み
async function loadAdminModule() {
  if (userStore.isAdmin) {
    const { AdminPanel } = await import('@/modules/admin')
    return AdminPanel
  }
}

• 管理者専用、特定権限専用など一部のユーザーのみがアクセスする機能には動的 import を適用しなければなりません。
• Vue では defineAsyncComponent を活用して非同期コンポーネントを定義できます。

import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
})

• 非同期コンポーネントにはローディング状態表示用の loadingComponent を指定することを推奨します。
• delay オプションを設定して短いローディング時のちらつきを防止することを推奨します。

---

21.2.3. プリロードとプリフェッチ

ユーザーが間もなくアクセスする可能性の高いリソースを事前に読み込み、体感速度を向上させなければなりません。

戦略	用途	優先順位
preload	現在のページで必ず必要なリソース	高い
prefetch	次のナビゲーションで必要になる可能性のあるリソース	低い

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="prefetch" href="/js/settings-page.chunk.js">

• 現在のルートで必須のリソース（フォント、主要画像）には preload を適用しなければなりません。
• 次のナビゲーション対象ルートのチャンクファイルには prefetch を適用することを推奨します。
• Vue Router のルート定義で webpackPrefetch またはビルドツールの自動 prefetch 機能を活用できます。
• ユーザー行動ベースのプリロード（例：リンクにマウスホバー時に該当ルートのチャンクをプリロード）を適用することを推奨します。

---

21.2.4. ツリーシェイキング

使用していないコードがビルド成果物に含まれないようツリーシェイキングを保証しなければなりません。

• ライブラリから機能をインポートする際は、必ず named import を使用しなければなりません。

// 正しい例
import { debounce } from 'lodash-es'

// 誤った例：ライブラリ全体がバンドルに含まれます
import _ from 'lodash'

• package.json に "sideEffects": false を設定して、バンドラーが未使用モジュールを除去できるようにしなければなりません。
• サイドエフェクトがあるファイル（CSS import、グローバルポリフィルなど）は sideEffects 配列に明示しなければなりません。

{
  "sideEffects": ["*.css", "*.scss", "./src/polyfills.ts"]
}

• ライブラリごとにツリーシェイキングが可能な import パターンを確認して適用しなければなりません。