场景：vue2项目，vuecli创建，使用webpack编译（vuecli底层是webpack），有两种方式实现组件可配置加载。1.前端写入组件路径，打包时编译所有组件（即编译所有组件），用户登录后，通过接口获取用户权限信息，导入用户有权限的组件访问（将有访问权限的组件放入路由）。2.前端资源配置加载，前端不写组件路径。这样直接编译，编译完成后通过接口获取用户可用的菜单，通过导入资源生成菜单和路由。（先打包，用户登录后从后台获取组件路径等配置信息，再导入资源）相比方案1和2，方案2的优点是可以在生产环境修改导入的组件通过配置信息。也就是可以在前端不上线的情况下改变路由对应的页面（组件），比如若仪管理系统中的若仪ui。方案2的缺点是因为编译时没有组件信息（没有入口文件），webpack会遍历所有文件夹，将所有vue文件拆分成jscsshtml文件，编译出来的产品会碎片化。1的好处是编译出来的产物更有逻辑性，编译出来的产物文件数量和体积都比较小。缺点是前端需要维护一套组件路径。当然这个缺点也是相对于2而言的，在前端写配置是一件很正常的事情，而2只是把这个配置放到了后端。方案一和方案二，两种实现方式在编译后的产品文件数量和文件体积上有明显的区别。本人工作中开发维护的前端项目，代码有12W+行。如果用方案一实现，编译后的产品有100+个js文件，用方案二实现，编译后的产品有1000+个js文件，文件数相差一个数量级.编译后的文件体积方案2的总体积比方案1的总体积大20%+，文件数量的一个数量级的差异反映了用户访问一个页面时，也会有一个数量级的差异在http请求中。这种网络资源的开销并不容易。另外，当页面需要使用大量的页面静态资源时，方案二的编译产物可能会导致Chrome浏览器控制台报错ERR_INSUFFICIENT_RESOURCES。,我选择选项1.结束。同步更新到你的语雀https://www.yuque.com/diracke...
