遅延ロードとコード分割
バンドルを分割し、コンポーネントとルートを遅延ロードします。
「遅延ロードとコード分割」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
バンドルサイズが重要な理由
すべてのコードを1つの大きなJavaScriptファイルにまとめると、最初の画面が表示されるまでユーザーを長く待たせることになります。コード分割によってアプリを必要なときだけ読み込む小さなチャンクに分割すると、初回のダウンロード量が減り、起動が速くなります。
動的なimport()
重要なツールが動的なimport()関数です。ファイルの先頭に記述する静的importとは異なり、必要になったときにモジュールを読み込み、Promiseを返します。バンドラーは動的なimportごとに独自のチャンクへ分割します。
const module = await import("./heavyModule.js")
module.doSomething()ルート単位のコード分割
最も大きな効果が得られるのはルート単位での分割です。これにより、各ページが独自のコードを読み込みます。Vue Routerでは、コンポーネントを直接インポートする代わりに、動的なimportを返す関数を渡します。
const routes = [
{
path: "/dashboard",
component: () => import("./views/Dashboard.vue")
}
]静的ルートと遅延読み込みルート
2つの方法を比較してみましょう。静的importではコンポーネントがメインチャンクにまとめられます。一方、遅延読み込み版では別のチャンクが作成され、ルートにアクセスしたときだけ取得されます。
// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"
// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")defineAsyncComponent
ルーター以外でコンポーネントを遅延読み込みするには、動的なimportをdefineAsyncComponentでラップします。Vueはそのコンポーネントが初めてレンダリングされるときにだけ読み込みます。
import { defineAsyncComponent } from "vue"
const Chart = defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)非同期コンポーネントの登録
非同期コンポーネントは他のコンポーネントと同じように登録し、テンプレートで使用します。読み込み処理はVueが透過的に行います。
export default {
components: {
HeavyChart: defineAsyncComponent(() =>
import("./components/HeavyChart.vue")
)
}
}ローディング状態とエラー状態
defineAsyncComponentの高度な使い方では、読み込み中にプレースホルダーを表示したり、失敗時にフォールバックを表示したりするためのオプションを指定できます。
const Chart = defineAsyncComponent({
loader: () => import("./HeavyChart.vue"),
loadingComponent: Spinner,
errorComponent: LoadError,
delay: 200,
timeout: 5000
})大きなコンポーネントの遅延読み込み
遅延読み込みに適しているのは、サイズが大きいものや使用頻度の低いものです。たとえば、チャート、リッチテキストエディター、地図、一部のユーザーだけが開くモーダルダイアログなどがあります。
const RichEditor = defineAsyncComponent(() =>
import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shownv-ifによる条件付き読み込み
非同期コンポーネントとv-ifを組み合わせると、ユーザーが操作して表示したときだけ、そのチャンクを取得できます。
<template>
<button @click="showEditor = true">Edit</button>
<RichEditor v-if="showEditor" />
</template>デバッグ用の名前付きチャンク
Webpack形式のマジックコメントを使うと、チャンクに読みやすい名前を付けられます。これにより、ネットワークタブやビルド出力を確認しやすくなります。
const Reports = () => import(
/* webpackChunkName: "reports" */ "./views/Reports.vue"
)効果を測定する
分割した後は、ビルド出力またはブラウザーのネットワークタブを確認してください。1つの大きなバンドルではなく、複数の小さなチャンクファイルが生成され、初回読み込みでダウンロードされるコード量も減っているはずです。
確認テスト
遅延読み込みについての知識を確認しましょう。
まとめ
動的な import() によるコード分割で、初期バンドルを小さくできます。遅延ルートには関数から import を返す方法を使い、オンデマンドで読み込むコンポーネントには、読み込み中やエラー時の状態を必要に応じて指定した defineAsyncComponent を使います。起動を高速に保つため、サイズの大きい部分や使用頻度の低い部分は遅延読み込みしてください。次はメモ化によって不要な処理をキャッシュし、スキップする方法を学びます。
よくある質問
「遅延ロードとコード分割」レッスンは無料ですか？
はい。「遅延ロードとコード分割」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「遅延ロードとコード分割」で何を学びますか？
バンドルを分割し、コンポーネントとルートを遅延ロードします。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「遅延ロードとコード分割」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 遅延ロードとコード分割
- メモ化のテクニック
- ボトルネックの特定と解消