當(dāng)在使用 vue-router 來(lái)構(gòu)建一個(gè) vue 單頁(yè)面應(yīng)用的時(shí)候，如果應(yīng)用的路有頁(yè)面非常多的時(shí)候，應(yīng)用打包后 Javascript 包（通常是app.js）會(huì)變得非常大，影響頁(yè)面的加載，出現(xiàn)長(zhǎng)時(shí)間的白屏。使用vue-router的懶加載機(jī)制可以使組件只有在需要的時(shí)候才會(huì)被加載，減小初始的app.js的大?。ǚ殖啥鄠€(gè) js 文件）。
步驟也很簡(jiǎn)單:

1. 只需要把路由對(duì)應(yīng)的組件定義成異步組件：

const Foo = resolve => {
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

2. 在使用的時(shí)候, 還是和普通的路由組件引入一樣：

const router = new VueRouter({
    routes: [
      { path: '/foo', component: 

2017.8.1修改

在官方英文的文檔有著不一樣的懶加載的操作方式，可能是因?yàn)楣膭?lì)大家多看看英文文檔，所以并沒有跟新到中文這邊來(lái)~

1. 步驟一： 通過一個(gè)返回 promise 對(duì)象構(gòu)建一個(gè)異步組件

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

2. 步驟二： 通過webpack2 的新功能，可以設(shè)置一個(gè) code-split

import('componentA.vue')

結(jié)合以上兩點(diǎn)可以簡(jiǎn)單的寫成：

const A = () => import('componentA.vue')

使用的時(shí)候直接使用這個(gè)定義的變量，指向該組件。
而原本的chunk定義也變得簡(jiǎn)單得多，在定義異步組件的時(shí)候通過注釋來(lái)控制 chunk 的名字

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

vue-router官方文檔
vue-router英文文檔