Vue.js 2.x中如何将多个路由组件打包至同一异步bundle同时加载

完全可以实现。Vue Router的路由懒加载本质是基于构建工具（Vue2项目绝大多数使用Webpack）的动态import()语法实现的代码分割，只需要利用Webpack的魔法注释给同组需要合并打包的组件指定相同的块名，构建时Webpack就会自动把这些组件打包到同一个异步bundle文件中。当用户访问同组内任意一个路由时，浏览器会一次性拉取整个bundle的代码，后续访问同组其他路由时直接走缓存，完全匹配你按角色权限分组加载的需求。

具体写法 #

原来的单组件单独懒加载写法会为每个组件生成独立的bundle：

// routes.js
export default [
  {
    path: '/messages',
    name: 'messages',
    component: () => import('@/views/messages')
  }
]

给同权限组的所有路由组件添加相同的webpackChunkName注释，即可将它们合并到同一个bundle中，以下示例把仅管理员可访问的消息中心、用户管理、角色配置三个页面合并到名为admin-group的异步包：

// routes.js
export default [
  {
    path: '/messages',
    name: 'messages',
    // 相同webpackChunkName的模块会被合并到同一个异步bundle
    component: () => import(/* webpackChunkName: "admin-group" */ '@/views/messages')
  },
  {
    path: '/user-manage',
    name: 'userManage',
    component: () => import(/* webpackChunkName: "admin-group" */ '@/views/user-manage')
  },
  {
    path: '/role-config',
    name: 'roleConfig',
    component: () => import(/* webpackChunkName: "admin-group" */ '@/views/role-config')
  },
  // 普通权限的通用页面可以单独分组
  {
    path: '/home',
    name: 'home',
    component: () => import(/* webpackChunkName: "common" */ '@/views/home')
  }
]

注意事项 #

• 该方案为Webpack原生支持，使用Vue CLI创建的Vue2项目无需修改任何构建配置，添加注释后生产环境构建即可自动生效
• 如果开发环境安装了babel-plugin-dynamic-import-node插件提升热更新速度，开发环境下动态import会被转为同步加载，不会出现拆分的chunk文件，属于正常现象，不影响生产环境的代码分割逻辑
• 分组命名需要严格对齐权限边界，不要把跨权限等级的组件设置为相同的chunk名，避免出现无权限用户提前加载高权限组件代码的问题
• 生产构建完成后，可以检查dist目录下的js资源，会看到和你设置的chunk名对应的文件（文件名带内容hash用于缓存更新），即代表配置生效

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