当一个Vue项目变得非常大时，使用Webpack的代码分离功能将VueComponents、routes或Vuex的代码分离出来按需加载。将大大提升App首屏的加载速度。在Vue项目中，我们可以在三种不同的情况下使用延迟加载和代码分离：Vue组件，也称为异步组件Vue-RouterVuex三者的共同点是使用动态导入，这在Webpack的第二个版本中是支持的.Vue组件中的延迟加载Eggheads有使用Vue异步组件按需加载组件的解释。实现一个异步组件，只需要使用import函数注册组件即可：Vue.component('AsyncCmp',()=>import('./AsyncCmp'))也可以使用本地注册组件的方式:newVue({//...components:{'AsyncCmp':()=>import('./AsyncCmp')}})使用箭头函数指向import函数，Vue只会执行代码请求在需要组件时加载组件。如果导入的组件是通过命名导出的，可以在Promise的返回值中使用对象解构的方式实现组件的按需加载。下面是加载KeenUI的UiAlert组件的例子：本机支持延迟加载。和懒加载组件一样，使用了import函数。例如，我们想延迟加载/login路由下的登录组件。//不再使用importLoginfrom'./login'constLogin=()=>import('./login')newVueRouter({routes:[{path:'/login',component:Login}]})Vuex中的延迟加载Vuex的registerModule方法允许我们动态创建Vuex模块。如果我们使用import函数将模块作为Promise中的有效负载返回，则可以实现延迟加载。conststore=newVuex.Store()...//假设我们要加载模块'login'import('./store/login').then(loginModule=>{store.registerModule('login',loginModule)})总结Vue+Webpack中的延迟加载非常简单。赶快用上面学过的方法，把你的Vue项目的代码分离出来，需要的时候按需加载，可以显着减少应用首屏的加载时间。
