公式の書き込みが非常に明確な!!!!!!!!!
遅延ロードをルーティング
パッケージには、アプリケーションを構築する場合には、Javascriptのパッケージには、ページのロードに影響を与える、非常に大きくなります。我々は、アセンブリの異なるコード・ブロックへの異なる経路に対応し、そしてその後、経路は、対応するコンポーネントをロードする前にアクセスされたときに、これより効率的にすることができる場合。
VUEの結合非同期成分およびWebPACKの符号分割機能、簡単なルーティングコンポーネント遅延読み込み。
まず、非同期成分は、植物プロミス関数（関数はプロミスコンポーネント自体を解決する必要があり返す）を返すように定義することができます。
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
第二、WebPACKの2に、我々が使用することができ、動的インポートコードブロック（分割点）の点を定義する構文：
import('./Foo.vue') // 返回 Promise
注意を払います
あなたはバベルを使用している場合は、追加する必要があります syntax-dynamic-import バベルが正しく文法を解析することができます作るためのプラグインを。
自動コードのWebPACK分割することができる非同期コンポーネントを定義する方法の両方の組み合わせ。
const Foo = () => import('./Foo.vue')
ルーティング設定では何も単に通常の使用として、変更する必要がありません Foo。
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
＃ブロックによる組立部品
時々 、私たちは同じ非同期ブロック（チャンク）でのルートにパッケージされているすべてのコンポーネントをしたいです。ただ、使用 名前チャンクチャンク名（必須のWebPACK> 2.4）を提供するために、特別なコメント構文を。
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の非同期モジュールは、非同期ブロックの同じブロック内に同じ名前のいずれかと組み合わされます。