这是我使用的方案，支持无限极动态路由+keep-alive缓存

这是我使用的方案，支持无限极动态路由+keep-alive缓存

这样子打包的话应该没有分包或者代码切割, 得使用Map设置个字典,打包时才可以分包

问题主要是 形如 resolve => require([ @/views/${view} ], resolve) 在构建时会将view下的组件全部打包在一起

我这边的处理方式是 先根据后端的动态路由, 维护一个异步路由映射表 形如:

// asyncrouter.js
export default {
     // 'key': ()=>import(/* webpackChunkName:"chunkName" */'@/views/someview')  这种ChunkName不生效呢
    // routerName 与 代码分割
    'someRouterName': resolve => require.ensure([], () => resolve(require('@/views/someview.vue')), 'chunkName')
}

permission中生成路由表时

export const loadView = (viewName) => {
  // 路由懒加载
  if (viewName && asyncrouter[viewName]) {
    // 通过routerName 映射
    return asyncrouter[viewName]
  }
}

构建后页面chunk已被分割

大腿不错啊