非同期コンポーネントはどのようにレイジーローディングを実現していますか？

Question

Accepted Answer

**非同期コンポーネント**により、コンポーネントのコードを**実際に必要とされるときだけロード**でき、別のバンドル（チャンク）に分割して必要に応じてフェッチされます。これにより、ユーザーがダウンロードする初期JavaScriptを削減できます。

## 非同期コンポーネントの定義

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

dynamic `import()`はバンドラー（Vite/webpack）に`HeavyChart.vue`を独自のファイルに分割し、メインバンドルの一部ではなく、コンポーネントが初めて使用されるときにレイジーロードするよう指示します。

## パフォーマンスにとって重要な理由

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

大規模であまり使用されないコンポーネント（リッチテキストエディタ、チャート、モーダル、管理パネルなど）は初期ダウンロードに含まれる必要がありません。これらをレイジーロードすることで、初期ロード時間とCore Web Vitalsが向上します。

## ローディング状態とエラー状態の処理

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

この高度な形式により、フェッチ中にスピナーを表示し、失敗時にフォールバックを表示できます。レイジーローディングは（通常は短時間ですが）ネットワーク遅延をもたらすため、これは重要です。

## 一般的なペアリング：ルートレベルのコード分割

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

ルートコンポーネントのレイジーローディングは最も一般的で影響力が大きい使用法です。各ページのコードはユーザーがそのページに遷移するときだけロードされます。

## 重要な理由

非同期コンポーネントはVueの**コード分割**メカニズムであり、アプリが成長するにつれて初期バンドルを小さく保つための重要な技術です。

重いコンポーネントやルート固有のコンポーネントをオンデマンドでロード（オプションのローディング/エラーUIを含む）することで、ユーザーが最初にダウンロードするJavaScriptを削減し、初期ロードを高速化します。

これは標準的で高い効果がある性能最適化であり、特にルートに適用する場合に有効です。