非同期コンポーネントとSuspense
defineAsyncComponentでコンポーネントを遅延ロードし、 でラップして、コンポーネントのバンドルを読み込んでいる間はフォールバックコンテンツを表示します。
「非同期コンポーネントとSuspense」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
非同期コンポーネントを使う理由
大きなコンポーネントや、管理画面・チャートライブラリなど使用頻度の低いコンポーネントを必要なときに読み込むと、初期バンドルを小さく保てます。VueのdefineAsyncComponentが動的インポートのライフサイクルを処理します。
defineAsyncComponent
コンポーネントを解決するPromiseを返すローダー関数を渡します。Vueが読み込み、エラー、タイムアウトを処理します。
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>非同期動作の設定
オプションオブジェクトを渡して、読み込み中のUI、エラーUI、読み込み開始までの遅延、タイムアウトをカスタマイズします。
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});バンドラーによるチャンク分割
動的インポートは、出力時に独立したチャンクになります。名前付けやプリフェッチには、Vite/webpackのマジックコメントを使用します。
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);ルートレベルの遅延読み込み
Vue Routerでは、ルート定義内で非同期コンポーネントを直接使用できます。
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Suspenseコンポーネント
Vueの実験的な<Suspense>は、ツリー内の非同期依存関係が保留中の間、フォールバックをレンダーします。
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>非同期setup()
setup()は非同期にできます。Vueは解決されるまでレンダーを待機します。Suspense内で動作します。
<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>
<!-- Parent uses Suspense to handle the await -->onErrorCapturedによるエラー処理
親コンポーネントでonErrorCapturedを使用すると、非同期コンポーネントや非同期setupで発生したエラーを捕捉できます。
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Suspenseとエラーバウンダリの併用
非同期コンポーネントのツリーをSuspense（読み込み用）と、エラーを捕捉する祖先コンポーネント（エラー用）の両方でラップします。
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspenseは実験的機能
Vue 3.4時点でも<Suspense>は実験的機能と位置付けられており、APIが変更される可能性があります。非同期コンポーネント自体（defineAsyncComponent）は安定しており、本番環境で使用できます。
非同期コンポーネントを使う場面
適した候補は、ルートコンポーネント、管理画面・設定画面、必要なときに開くモーダル、負荷の大きいチャートやエディターです。一方、小さなコンポーネントやすべてのページで使うコンポーネントには使用せず、別の方法で分割してください。
確認問題
動的インポートを遅延読み込みコンポーネントに変換するVue 3の関数はどれですか？
まとめ：非同期コンポーネントとSuspense
defineAsyncComponentは動的インポートをラップして遅延読み込みを実現します。loadingComponent、errorComponent、delay、timeoutを設定できます。バンドラーは独立したチャンクを出力します。ルートレベルの遅延読み込みはcomponent: () => import('...')で実現できます。<Suspense>は非同期依存関係が解決されるまでフォールバックを表示します（現在も実験的機能です）。非同期setup()とトップレベルのawaitはSuspense内で動作します。onErrorCapturedは非同期エラーを捕捉します。
よくある質問
「非同期コンポーネントとSuspense」レッスンは無料ですか？
はい。「非同期コンポーネントとSuspense」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「非同期コンポーネントとSuspense」で何を学びますか？
defineAsyncComponentでコンポーネントを遅延ロードし、 でラップして、コンポーネントのバンドルを読み込んでいる間はフォールバックコンテンツを表示します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「非同期コンポーネントとSuspense」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 依存性注入のためのprovide()とinject()
- 非同期コンポーネントとSuspense
- カスタムディレクティブ
- プラグインシステム：app.use()