vue中使用延时加载

延时加载在vue组件

---

 

new Vue({
  // ...
  components: {
    AsyncCmp: () => import("./AsyncCmp")
  }
});

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

 

延时加载在vue-router

---

Vue路由器内置支持延迟加载。它就像使用该import功能导入组件一样简单。假设我们想在/ login路由中延迟加载一个Login组件：

// Instead of: import Login from './login'
const Login = () => import("./login");

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

 

延时加载在vuex模块

---

 Vuex有一种registerModule方法可以让我们动态创建Vuex模块。如果我们考虑到该import函数返回的Promise上来延迟加载模块：

const store = new Vuex.Store()
...
// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})