遅延ローディングルート

Watch a free video course about Vue Router on Vue School

バンドラーを使ってアプリケーションを構築している時、バンドルされる JavaScript が非常に大きいものになり得ます。結果的にページのロード時間に影響を与えてしまいます。もし各ルートコンポーネントごとに別々のチャンクにして、訪れたルートの時だけロードできればより効率的でしょう。

Vue の 非同期コンポーネント機能 (opens new window) と webpack の コード分割機能 (opens new window) を組み合わせることでとても簡単に遅延ロードするルートコンポーネントができます。

最初に、非同期コンポーネントは Promise (コンポーネント自身解決する必要がある) を返すファクトリ関数として定義できます:

const Foo = () =>
  Promise.resolve({
    /* component definition */
  })

次に、webpack 2 において 動的 import (opens new window) 構文を使用して、コード分割ポイントを示すことができます:

import('./Foo.vue') // returns a Promise

Note: Babel を使用している場合、Babel が構文を正しく解析するために syntax-dynamic-import (opens new window) プラグインを追加する必要があります。

2 つを組み合わせることで、これは、webpack によって自動的にコード分割される非同期コンポーネントを定義する方法です:

const Foo = () => import('./Foo.vue')

同じチャンク内でのコンポーネントグループ化

しばしば同じ非同期のチャンクに、そのルート配下のネストされた全てのコンポーネントをグループ化したいと思うかもしれません。それを実現するためには、 特別なコメント構文 (webpack > 2.4 必須)を使用してチャンクの名前を提供する 名前付きチャンク (opens new window) を使う必要があります。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

webpack は同じチャンク名のどんな非同期のモジュールも同じ非同期のチャンクにグループします。