微前端是啥?
微前端是类似于微服务的架构
技术手段:
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 必须指向一个同域地址导致的问题
沙箱:
与外界隔绝的环境,内外环境互不影响,外界无法改环境内的东西
沙箱的实现:
闭包环境
模拟原生浏览器环境