Vuex模块懒加载实现求助：基于指定Webpack代码分割方案

我之前也尝试过基于Webpack代码分割来实现Vuex模块的懒加载，刚好可以给你分享几种可行的改造方案，解决你遇到的问题：

方案一：与路由绑定，导航时懒加载模块 #

适合和特定页面强关联的模块（比如你的search、profil模块），在路由进入前动态加载并注册模块，避免初始打包体积过大：

1. 改造store/index.js #

保留核心模块（比如app），其他模块改为动态注册：

import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app'; // 核心模块不懒加载

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app
  },
});

export default store;

2. 在路由配置中添加懒加载逻辑 #

以search模块为例，在路由的beforeEnter钩子中加载模块：

// router/index.js
import store from '../store'

const SearchPage = () => import('./views/SearchPage.vue')

const routes = [
  {
    path: '/search',
    component: SearchPage,
    beforeEnter: async (to, from, next) => {
      // 动态加载模块
      const searchModule = await import('../store/modules/search')
      // 避免重复注册模块（Vuex 3.x可使用store.hasModule('search')判断）
      if (!store.state.search) {
        store.registerModule('search', searchModule.default)
      }
      next()
    }
  }
]

方案二：在组件内部懒加载模块 #

适合仅在特定组件中使用的模块，比如profil模块只在个人中心组件用到：

<!-- Profil.vue -->
<script>
import store from '@/store'

export default {
  async created() {
    // 动态加载并注册模块
    const profilModule = await import('@/store/modules/profil')
    if (!store.state.profil) {
      store.registerModule('profil', profilModule.default)
    }
    // 注册后即可正常调用模块内的actions/mutations
    this.$store.dispatch('profil/fetchUserInfo')
  },
  beforeDestroy() {
    // 可选：组件销毁时卸载模块，释放内存
    store.unregisterModule('profil')
  }
}
</script>

关键注意事项 #

• 命名空间：确保所有Vuex模块都开启namespaced: true，避免不同模块的方法/状态冲突
• 重复注册：必须判断模块是否已存在，否则多次进入页面会触发Vuex重复注册报错
• Webpack支持：Vue CLI创建的项目默认已配置好动态import的代码分割，无需额外配置

可选：初始化时异步加载部分模块 #

如果想在应用启动时按需加载部分模块，而非完全依赖路由/组件触发，可以用异步方式创建store：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';

Vue.use(Vuex);

async function createStore() {
  // 并行加载多个模块
  const [searchModule, identityModule] = await Promise.all([
    import('./modules/search'),
    import('./modules/identity')
  ])

  return new Vuex.Store({
    modules: {
      app,
      search: searchModule.default,
      identity: identityModule.default
    },
  });
}

export default createStore();

对应的main.js需要改为异步初始化：

// main.js
import Vue from 'vue'
import App from './App.vue'
import createStore from './store'

createStore().then(store => {
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
})

内容的提问来源于stack exchange，提问作者Adri