微前端实现方式对比

一. 微前端实现方式?

1.Iframe
postMessage, 实现页面之间的传参

优势:

• 技术成熟
• 支持页面嵌入
• 天然支持运行沙箱隔离,独立运行

劣势:

• 页面之间可以是不同的域名,(需要对不同的域名进行鉴权处理,加大开发量与一些跨域问题的处理)
• 需要对应的设计一套应用通讯机制,如何监听,传参格式等内容
• 应用加载,渲染,缓存等体系的实现(交给浏览器处理,如何进行控制比较麻烦)

2.web component

自定义标签,定义成组件,行为

优势:

• 支持自定义组件
• 支持shadow dom,并通过关联进行控制
• 支持模板template和插槽slot,引入自定义组件内容

劣势:

• 接入微前端需要重写当前项目
• 生态系统不完善,技术过新容易出现兼容性问题
• 整体架构设计复杂, 组件与组件之间拆分过细时候,容易造成通讯和控制繁琐

3.自研框架

优势:

• 高度定制化,满足需要做兼容的一切场景
• 独立的通信机制与沙箱运行环境(Iframe 实现天然支持),可解决应用间相互影响的问题
• 支持不同技术栈子应用,可以无缝实现页面无刷新渲染

劣势:

• 技术实现难度较高(实现独立渲染)
• 需要设计一套定制的通信机制(通信规范)
• 首次加载会出现资源过大的情况

二. 最终选型

4. 最终实现—自研框架

• 路由分发式: 处理子应用渲染
• 主应用控制路由匹配和子应用加载(交给子应用渲染),(主应用提供方法修改共享依赖)共享依赖加载
• 子应用做功能(控制与功能分离),并接入主应用实现主子应用控制与分离