Vue2 异步组件 vs Router vs Vuex懒加载

Question

异步组件懒加载

通过将 import 函数包装到箭头函数中，Vue 仅在请求时执行它，并在那一刻加载模块。

<script>
    // 全局组件注册
    Vue.component("AsyncCmp", ()=> import("./AsyncCmp");
    // 或者
    Vue.component("AsyncCmp", resolve => {
         require(['./AsyncCmp'], resolve)             
     })
    // 本地注册
    new Vue({
        components:{
            AsyncCmp: ()=> import("./AsyncCmp"),
            // 如果组件导入使用 命名的 export，则可以在返回的 Promise 上使用对象分解。
            UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
        }              
    })
</script>

Router 懒加载

// 代替：import Login from './login'
const Login = () => import("./login")
new VueRouter({
    routes:[{
        path:'/login',
        component: Login
    }]
})

Vuex 懒加载

Vuex 具有 registerModule 使我们能够动态创建 Vuex 模块的方法。如果考虑到该 import 函数以 ES 模块作为有效负载返回了 promise，则可以使用它来延迟加载模块：

const store = new Vuex.Store();
// 假设这有个登录模块要加载
import('./store/login').then( loginModule =>{
    store.registerModule('login', loginModule)
})