vue中使用延时加载

佚名 6年前 (2019-05-09) 随笔 1737人围观抢沙发百度已收录

延时加载在vue组件

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

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

延时加载在vue-router

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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)
})