当在使用 vue-router 来构建一个 vue 单页面应用的时候，如果应用的路有页面非常多的时候，应用打包后 Javascript 包（通常是app.js）会变得非常大，影响页面的加载，出现长时间的白屏。使用vue-router的懒加载机制可以使组件只有在需要的时候才会被加载，减小初始的app.js的大小（分成多个 js 文件）。
步骤也很简单:
- 只需要把路由对应的组件定义成异步组件：
const Foo = resolve => {
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}
- 在使用的时候, 还是和普通的路由组件引入一样：
const router = new VueRouter({
routes: [
{ path: '/foo', component:
2017.8.1修改
在官方英文的文档有着不一样的懒加载的操作方式，可能是因为鼓励大家多看看英文文档，所以并没有跟新到中文这边来~
- 步骤一： 通过一个返回 promise 对象构建一个异步组件
const A = () => Promise.resolve({ /* component definition */ })
- 步骤二： 通过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')
