Vue-router 懒加载 - 异步组件

当在使用 vue-router 来构建一个 vue 单页面应用的时候，如果应用的路有页面非常多的时候，应用打包后 Javascript 包（通常是app.js）会变得非常大，影响页面的加载，出现长时间的白屏。使用vue-router的懒加载机制可以使组件只有在需要的时候才会被加载，减小初始的app.js的大小（分成多个 js 文件）。
步骤也很简单:

1. 只需要把路由对应的组件定义成异步组件：

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

2. 在使用的时候, 还是和普通的路由组件引入一样：

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

2017.8.1修改

在官方英文的文档有着不一样的懒加载的操作方式，可能是因为鼓励大家多看看英文文档，所以并没有跟新到中文这边来~

1. 步骤一： 通过一个返回 promise 对象构建一个异步组件

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

2. 步骤二： 通过webpack2 的新功能，可以设置一个 code-split

import('componentA.vue')

结合以上两点可以简单的写成：

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

使用的时候直接使用这个定义的变量，指向该组件。
而原本的chunk定义也变得简单得多，在定义异步组件的时候通过注释来控制 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英文文档