在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。
如果是webpack1在vue-router可以这样写：
{
path: 'timeManage/reportList',
name: 'reportList',
component: resolve => require(['views/timeManage/reportList'], resolve)
}
如果是webpack2可以这样写
{
path: 'timeManage/reportList',
name: 'reportList',
component:() => import('views/timeManage/reportList')
}
高级写法，需要webpack2.3.0+ vue-router 2.4.0+：
const AsyncComp = () => ({
// 需要加载的组件. 应当是一个 Promise
component: import('./MyComp.vue'),
// loading 时应当渲染的组件
loading: LoadingComp,
// 出错时渲染的组件
error: ErrorComp,
// 渲染 loading 组件前的等待时间。默认：200ms.
delay: 200,
// 最长等待时间。超出此时间则渲染 error 组件。默认：Infinity
timeout: 3000
})
就这么简单！～
当导航到异步页面的时候，会请求服务端，当服务端返回资源后，才会跳转，否则会卡在那里。
所以如果慢速网络，建议加个loading
执行build命令后，dist/js下的资源就会如下图，红框为异步组件，被单独打包出来了
image.png
