在vue应用中,我们可以在三个层次上使用懒加载和代码分离技术:
他们都有一个共性:他们使用了动态引入(webpack2.0以上支持)。
这个在 Egghead(国外博文网站)的文章 “Vue异步组件中按需加载组件” 已经有了很好的说明。
使用起来也很简单,注册组件时使用import方法即可:
Vue.component("AsyncCmp", () => import("./AsyncCmp"));
And using local registration:
或者使用局部注册:
new Vue({
// ...
components: {
AsyncCmp: () => import("./AsyncCmp")
}
});
通过将import函数包装成箭头函数,Vue将仅在收到请求时执行它,并在此时加载该模块。
假如组件导入时要使用已命名的导出,你可以在返回的Promise函数里面使用对象解构。例如,在KeenUI中使用UiAlert组件:
...
components: {
UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...
Vue router 支持 懒加载 。使用起来也很简单,在引入组件的时候使用import方法。比如我们想在/login路由中懒加载登录组件:
// Instead of: import Login from './login'
const Login = () => import("./login");
new VueRouter({
routes: [{ path: "/login", component: Login }]
});
Vuex中的registerModule
方法允许我们动态创建Vuex模块。如果我们的import方法返回的是一个以ES模块为载荷的Promise,那我们就可以使用它来懒加载这个模块:
const store = new Vuex.Store()
...
// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
store.registerModule('login', loginModule)
})
在Vue和Webpack中使用懒加载已经变得非常简单。运用以上内容,你就可以对你的app从这几个不同的方面进行分块并按需加载,从而减轻app的初始加载。
原英文链接:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/