微前端实现方式对比
@ 姜波 | 星期五,九月 17 日,2021 年 | 1 分钟阅读 | 更新于 星期五,九月 17 日,2021 年

Iframe

优势

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

劣势

  • 页面之间可以是不同的域名,鉴权等
  • 需要对应的设计一套应用通讯机制,如何监听、传参格式等内容
  • 应用加载、渲染、缓存等体系的实现

Web Component

优势

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

劣势

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

自研框架

优势

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

劣势

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

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接