[Vue] 两种配置化加载组件方案分析

场景：
vue2项目，vue cli创建，编译使用webpack(vue cli底层是webpack)，要实现组件的配置化
加载有两种思路。

1、前端写定组件路径，打包时全部编译(即编译所有的组件)，在用户登录后，通过接口获取用户的权限信息，导入该用户有权限访问的组件(将有权限访问的组件放入路由中)。

2、前端资源配置化加载，前端不写组件路径。这样直接编译，编译完成之后再通过接口得到用户可用菜单，import资源生成菜单和路由。（先打包，在用户登录后从后端获取组件路径之类的配置信息，再import资源）

1、2两种方案相比，2的优势在于可以通过配置信息，在生产环境修改导入的组件，即不通过前端上线就可以实现变更路由对应页面(组件), 举个例子若依管理系统里的ruo-yi ui。方案2的劣势是由于编译时没有组件信息(没有入口文件) webpack会遍历所有的文件夹，将所有的vue文件拆分为js css html文件，编译产物稀碎。

1的优势在于，编译产物比较有逻辑，编译产物文件数量和文件体积小。劣势是前端要维护一套组件的路径，当然这个劣势也是相对于2来说的，前端写配置，是再正常不过的一件事，2也只是把这个配置放到了后端。

方案1、方案2，两种实现方式在编译产物的文件个数、文件体积上有明显区别，对我工作中所开发维护的前端工程，代码已经12W+行，如果用方案1来实现，编译产物js文件有100+，用方案2来实现，编译产物js文件有1000+，文件个数差距有一个量级。编译文件体积方案2总体积比方案1总体积多20%+。
文件个数上1个量级的差距，反应到当用户访问页面的时候，http请求也会有一个量级的差距，这个网络资源的开销属实不轻松。

此外，当页面上，需要大量的使用页面静态资源时，方案2的编译产物可能会导致Chrome浏览器控制台报错ERR_INSUFFICIENT_RESOURCES，我就遇到了这种错误，挺无解的，所以问我选哪种，我选方案1。

完结。

同步更新到自己的语雀
https://www.yuque.com/diracke...