使用webpack的代码分离"Code Splitting"实现vue应用的懒加载

原文链接： https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/

在vue应用中，我们可以在三个层次上使用懒加载和代码分离技术：

• 组件，通常是我们熟知的异步组件
• 路由
• Vuex模块

他们都有一个共性：他们使用了动态引入（webpack2.0以上支持）。

# Vue组件中的懒加载

这个在 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中懒加载

Vue router 支持 懒加载 。使用起来也很简单，在引入组件的时候使用import方法。比如我们想在/login路由中懒加载登录组件：

// Instead of: 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()

...

// 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/