微前端-iframe/乾坤/无界

792 阅读2分钟

微前端是啥?

微前端是类似于微服务的架构

技术手段:

1.iframe

通过iframe加载子应用。 通信可以通过postMessage进行通信。

优点

  • 简单
  • 隔离
  • 安全

缺点

  • url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  • dom割裂严重,弹窗只能在iframe内部展示,无法覆盖全局
  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程
  • 通信非常困难,只能通过postmessage传递序列化的消息

2.乾坤

优点

css/js沙箱隔离

对umi 用户很友好

致命缺点:不支持vite

3.无界

无界的方案就是:JS 放 iframe 里运行,DOM 放 webComponent 渲染

无界=(iframe+ web component)

个人支持无界,wujie 是腾讯出品的一款微前端框架

DOM 就不放 iframe 里渲染,而是单独提取到一个 webComponent 里渲染,顺便用 shadowDOM 解决样式隔离的问题。

优点:

应用之间切换很快,不会加载很久

相比 qiankun 接入成本更低

与 iframe 的接入方式很类似,只需引入一个 React 组件渲染子应用即可。

vite 兼容性好

iframe 沙箱隔离性好

缺点:

用于 js 沙箱的 iframe 是隐藏在主应用的 body 下面的,相当于是常驻内存,这可能会带来额外的内存开销。

复杂的 iframe 到 webComponent 的代理机制,导致市面上大部分富文本编辑器都无法在无界中完好运行。

用于 JS 沙箱的 iframe 的 src 必须指向一个同域地址导致的问题

沙箱:

与外界隔绝的环境,内外环境互不影响,外界无法改环境内的东西

沙箱的实现:

闭包环境

模拟原生浏览器环境