当一个Vue应用越来越大，通过使用Webpack的代码分离来懒加载组件、路由、Vuex等模块会加快加载所需代码块的速度。
我们可以通过三个不同的层级在Vue应用中应用懒加载和代码分离：
- 组件（异步组件）
- 路由
- Vuex
在这三个层级使用懒加载和代码分离有一个共同点就是：都需要使用动态加载。
在组件运用懒加载
注册组件的时候用import函数导入组件：
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
使用局部注册：
new Vue({
// ...
components: {
'AsyncCmp': () => import('./AsyncCmp')
}
})
在箭头函数中返回import函数，然后Vue会在运用到该组件的时候执行import。
如果组件加载时用到了命名导出，可以对返回的Promise对象使用解构赋值，举个例子，从KeenUI中导入UiAlert组件：
...
components: {
UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...
在路由运用懒加载
Vue-router已经内置支持了懒加载，跟组件懒加载一样用import函数就可以了，假设我们想要在/login路由中懒加载Login组件：
// 取代：import Login from './login'
const Login = () => import('./login')
new VueRouter({
routes: [
{ path: '/login', component: Login }
]
})
懒加载Vuex模块
Vuex有一个registerModule方法可以动态创建一个Vuex模块。因为import函数会返回一个带有ES Module作为载荷的promise对象，我们可以使用它来懒加载模块：
const store = new Vuex.Store()
...
// 假设我们想要加载一个login模块
import('./store/login').then(loginModule => {
store.registerModule('login', loginModule)
})
总结
在Vue和Webpack下使用懒加载非常简单，运用刚才学的东西你可以分割你的代码成代码块然后按需加载，从而减轻应用的首次加载。
