defineAsyncComponent() 非同期コンポーネントの定義
最終更新：2026-10-22
defineAsyncComponent() 非同期コンポーネントの定義
defineAsyncComponent() は必要になった時点で初めて読み込まれるコンポーネントを作成します。ルートレベルや重いコンポーネントの遅延読み込みに使います。
| グループ | グローバル API |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const Editor = defineAsyncComponent(() => import("./Editor.vue"))
// ロード中・エラー時のフォールバック付き
const Panel = defineAsyncComponent({
loader: () => import("./Panel.vue"),
loadingComponent: Spinner,
errorComponent: ErrorBox,
delay: 200
})⚙️ 引数
| loader | options | Promise を返すローダー関数、または設定オブジェクト（loader/loadingComponent/errorComponent/delay/timeout） |
|---|
戻り値：非同期コンポーネント（初回レンダリング時に読み込み開始）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
'Lazy component ready' appears after about 0.8s.💡 ポイント
💡 ヒント ルートレベルの遅延読み込みが最も効果が大きいです。初回画面では現在のページのコードだけをダウンロードします。
ℹ️ 補足 設定オブジェクトの delay でローディングのちらつきを避け、timeout でタイムアウトエラーを制御できます。
⚠️ 注意 非同期コンポーネントは、既定では再構築のたびに再読み込みされます（キャッシュされていれば再利用）。状態を保つには KeepAlive を併用してください。
🏷️ 関連グローバル API
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q 動的 import() との関係は？
A import() をラップします。Promise をレンダリング可能なコンポーネントに変え、ロード中・エラー時のフォールバックも提供します。
Q いつ読み込みが始まりますか？
A そのコンポーネントを初めてレンダリングする必要が生じたときです。以降はキャッシュされたモジュールを再利用します。
Q Suspense と組み合わせられますか？
A できます。Suspense が待機状態を引き受ければ、loadingComponent は不要になります。
