前一篇文章，我们简单描述了webpack的编译执行原理，要实现非SSR下的VUE持久化路由动态加载，需要解决两个问题：
1，module的key必须是固定值，不能随文件多少而变化，也就是持久化
2，路由对应的module，由开发编译改为运行加载，即：
从数据库中获取数据，然后运行时组装成webpack编译后的样子。
webpack编译后的chuck和module是连续数字，0是默认自动加载。如果要持久化，就必须把数字换成唯一能标识的值。
方案如下：
一：js文件名称直接用官方提供的，code split方案即可，然后会编译成块名称，比如
const IndexPage = r => require.ensure([], () => r(require('./src/vue/frame/Index.vue')), 'Index')
编译后，是Index.js
二：module名称持久化使用NamedModulesPlugin（相对路径的缺陷蛮多，姑且不论）
然后这样就ok了么？No！！！，由于笔者使用的是webpack1.x版本，编译后运行会发生异常。
需要做如下处理，目前最新版本的webpack已经不存在该问题
如图，这里有一个chunk.id类型的判断。
既然实现了持久化，那么剩下的问题就是在什么时机去获取数据库，运行加载。
路由配置文件会有一个独立的moduleid，如下图红色标记的部分
由于routerHandle里涉及比较多的业务信息，就不贴了。既然有了切入点，在routerHandle只需要干两个事情
1，ajax去获取数据，当然得同步获取
2，根据数据，组装成如下样式即可：
var IndexPage = function IndexPage(r) {
return __webpack_require__.e/* nsure */('xxx', function () {\n return r(__webpack_require__(\"yyy\"));\n });\n};
为了方便开发使用，我们对路由维护做了单独的UI，功能如下：
1，支持上传路由配置js文件，直接解析存储数据库
2，上传编译后的js文件，由运行平台自动加载
3，加入版本控制
等等
结语：
由于笔者是从webpack1的基础上去实现，蛮多波折。
还是希望官方能正式提供一种完善的持久化方案。目前虽然能实现，但缺点很多就不一一列举了。
就项目实际情况看，这是一种刚需。比如多部门合作项目，整体编译不现实，特别是涉及生产环境文件更新，改了什么更新什么，而不是整体替换。
开发时比重过多，运行时比重较小，灵活性不好。
网友评论