前端性能优化(2.4 vue 懒加载)

1. 组件注册懒加载

(1)全局注册

Vue.component('AsyncComponent', ()=> import('./AsyncComponent.vue'))

(2)局部注册

new Vue({
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
})

(3)named export组件注册

new Vue({
  components: {
    AsyncComponent: () => import('xx-ui').then(({ AsyncComponent }) => AsyncComponent)
  }
})

2. Vue router路由注册懒加载

const Login = () => import('./Login.vue')
new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

3. vuex 模块懒加载

const store = new Vuex.Store()

import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})
原文地址:https://www.cnblogs.com/zhoulixue/p/14518972.html