微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值:
1、技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权
2、独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
3、增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
4、独立运行时
每个微应用之间状态隔离,运行时状态不共享
微前端的几种框架
阿里-基于 single-spa 的 qiankun;
京东-基于 WebComponent 的 micro-app;
腾讯-基于 webcomponent 容器 + iframe 沙箱 的 无界方案;
虽然我们现在用的是 qiankun ,但那是前两年调研的结果,在我写这篇文章的过程中,我突然发现,2022年腾讯开源了无界,看了下官方文档,看来无界更好些。
接下来我们来对比下这三个框架:
一、qiankun 方案
qiankun 方案是基于 single-spa 的微前端方案。
特点
1、 html entry 的方式引入子应用,相比 js entry 极大的降低了应用改造的成本;
2、完备的沙箱方案,js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套渐进增强方案,css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 两套适用不同场景的方案;
3、做了静态资源预加载能力;
不足
1、适配成本比较高,工程化、生命周期、静态资源路径、路由等都要做一系列的适配工作;
2、css 沙箱采用严格隔离会有各种问题,js 沙箱在某些场景下执行性能下降严重;
3、无法同时激活多个子应用,也不支持子应用保活 ;有需要同时激活多个子应用,将应用当作模块使用的场景,qiankun很明显不适合。
4、无法支持 vite 等 esmodule 脚本运行;这也是困扰我们的一点,因为现在项目用的qiankun所以导致在升级到 Vue3.0后,无法使用 vite,而是依然用的Vue3.0 + webpack。
底层原理 js沙箱使用的是proxy进行快照然后用用 with(window){} 包裹起来 with内的window其实就是proxy.window 我们声明变量 var name = '小满' 实际这个变量挂到了proxy.window 并不是真正的window
css沙箱原理 第一个就是shadowDom隔离 第二个类似于Vue的scoped [data-qiankun-426732]
二、micro-app 方案
micro-app 是基于 webcomponent + qiankun sandbox 的微前端方案。
特点
1、使用 webcomponet 加载子应用相比 single-spa 这种注册监听方案更加优雅;
2、复用经过大量项目验证过 qiankun 的沙箱机制也使得框架更加可靠;
3、组件式的 api 更加符合使用习惯,支持子应用保活;
4、降低子应用改造的成本,提供静态资源预加载能力;
不足
1、接入成本较 qiankun 有所降低,但是路由依然存在依赖; (虚拟路由已解决)
2、多应用激活后无法保持各子应用的路由状态,刷新后全部丢失; (虚拟路由已解决)
3、css 沙箱依然无法绝对的隔离,js 沙箱做全局变量查找缓存,性能有所优化;
4、支持 vite 运行,但必须使用 plugin 改造子应用,且 js 代码没办法做沙箱隔离;
5、对于不支持 webcompnent 的浏览器没有做降级处理;
底层原理 js隔离跟qiankun类似也是使用proxy + with,css隔离自定义前缀类似于scoped
三、无界方案
无界微前端方案基于 webcomponent 容器 + iframe 沙箱,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。
特点
1、接入简单只需要四五行代码,很简单
2、不需要针对vite额外处理
3、预加载
4、应用保活机制
不足
1、隔离js使用一个空的iframe进行隔离
2、子应用axios需要自行适配
3、iframe沙箱的src设置了主应用的host,初始化iframe的时候需要等待iframe的location.orign从'about:blank'初始化为主应用的host,这个采用的计时器去等待的不是很优雅。
底层原理 使用shadowDom 隔离css,js使用空的iframe隔离,通讯使用的是proxy。
因为我用的是 Vue框架,所以主要从vue框架出发来看。
首先qiankun本身固有的一些缺点,比如无法同时激活多个子应用、不支持vite,所以有可能有这类需求的qiankun就不需要考虑了
micro-app 和 无界我个人更倾向于 无界,毕竟2022年刚出的,功能更健全。唯一缺点可能是社区文档没那么多,出了问题,网上没那么多博客文档支持。