[Vue]SPA减少首屏加载时间-使用webpack的代码分离实

当一个Vue的项目体积变得十分庞大的时候，使用Webpack的代码分离功能将Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。

核心：动态import

1. vue组件

   • 全局Vue.component('AsyncCmp', () => import('./AsyncCmp'))
   • 局部 new Vue({ ... components:{ 'AsyncCmp': ()=> import('./AsyncCmp') } })
   • 如果导入的组件是使用命名的方式进行导出的components: { UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert) }
     使用箭头函数指向import函数，Vue将会在需要该组件的时候才执行请求加载该组件的代码。

2. vue-router
   例如我们想在/login这个路由下懒加载Login组件。

// 不再使用 import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

3. Vuex的registerModule方法允许我们动态的创建Vuex的模块。如果我们使用import函数在Promise中返回模块作为载荷（payload），就实现了懒加载。

const store = new Vuex.Store()

// 假设我们想加载'login'这个模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})