多Vue实例场景下如何实现路由懒加载与代码分割？

看来你遇到的核心问题是在多Vue实例架构下，常规路由懒加载写法没有触发webpack的代码分割——原因很简单：原来的写法把路由赋值为懒加载函数，但Vue实例初始化时并没有等待这个函数加载完成，而且webpack的代码分割逻辑需要明确的动态导入触发时机。

下面给你一套可行的实现方案，既能保留多Vue实例的架构，又能实现每个产品代码的独立chunk按需加载：

1. 将实例初始化改为异步逻辑 #

把每个产品的初始化函数改成异步函数，先动态加载对应的路由模块，再创建Vue实例：

// 异步初始化App1的函数
const initialiseApp1 = async () => {
  // 动态导入App1的路由模块，webpack会自动把它打包成独立chunk
  const { default: App1Router } = await import('./App1Router');
  // 等待路由加载完成后，再创建Vue实例
  new Vue({ 
    el: '#app', 
    router: App1Router, 
    store: Store, 
    render: h => h(Tracker), 
    i18n, 
  });
}

2. 调整路径匹配与初始化逻辑 #

保留原来的路径判断逻辑，但调用初始化函数时处理异步流程：

const pathname = window.location.pathname;
const productName = pathname.substr(1).toLowerCase(); // 简化字符串截取写法

if (productName === 'app1') {
  // 调用异步初始化函数，可按需添加错误捕获
  initialiseApp1().catch(err => {
    console.error('Failed to initialise App1:', err);
  });
}
// 其他产品可按同样逻辑扩展
else if (productName === 'app2') {
  const initialiseApp2 = async () => {
    const { default: App2Router } = await import('./App2Router');
    new Vue({
      el: '#app',
      router: App2Router,
      // ...对应产品的其他配置
    });
  };
  initialiseApp2();
}

3. 进一步优化：路由内部组件继续懒加载 #

在每个产品的路由文件里，还可以对页面组件做懒加载，实现更细粒度的代码分割：

// App1Router.js
const router = new VueRouter({
  routes: [
    {
      path: '/app1/home',
      // 这里的懒加载依然有效，会生成更小的独立chunk
      component: () => import('./views/App1Home.vue')
    },
    {
      path: '/app1/profile',
      component: () => import('./views/App1Profile.vue')
    }
  ]
});

export default router;

为什么这样能生效？ #

• webpack会识别await import('./App1Router')这类动态导入语法，自动把对应模块打包成独立的chunk文件。
• 只有当用户访问/app1路径时，才会触发这个动态导入，加载对应的chunk后再初始化Vue实例，完全满足按需加载的需求。

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