背景
公司要做一款产品，整合之前各个域的系统。合并成大的系统。
技术选型
各个子产品的技术栈，组件库都使用的vue和element-ui。主框架也选取了vue。整合系统则选择了qiankun，有以下几点考虑
- js库的复用问题
- 采用iframe需要解决cookie的复用问题
- 生态 iframe做微前端的技术方案比较少
- iframe天然的隔离是优势也是缺点，无法复用主项目的
- iframe弹框遮盖全屏
方案流程
改造现有子项目
- 子项改造, 编写microApp包，封装qiankun合子系统交互实现。功能如下
- 暴露函数，传入Vue。在Vue构造实例的时候混入父框架Store模块, 赋予主框架交互的能力
- 提供keepAlive能力，缓存VueNode实现
- 给子项目注册public, 解决乾坤静态资源加载问题
- 子项目拆分
主项目和子项目交互通信
本地调试
- 本地调试中需要同时启动主项目合子项目，特别麻烦。子系统开发人员多，有的没有主项目权限
- 开发vue-cli-plugin-html-proxy 利用devSever去代理线上的系统
- 访问test-in-main会返回线上系统的html，同时将线上子系统代理到本地
- vue.config.js 添加适当的proxy
改进与思考
- 现有keepAlive方式太复杂, 可以尝试添加手动加载。利用原生的keepalive
- 没有使用postcss, 未在项目添加css模块
- cdn没有本地模式
- 菜单接口有16k，字段名称有非常大的冗余。接口慢是，会有长时间loading。尝试下前端缓存
