微前端一：技术选型

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构具备以下几个核心价值：

1、技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权
2、独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3、增量升级
在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4、独立运行时
每个微应用之间状态隔离，运行时状态不共享

微前端的几种框架

阿里-基于 single-spa 的 qiankun；

https://qiankun.umijs.org/zh/guide

京东-基于 WebComponent 的 micro-app；

https://zeroing.jd.com/docs.html#/

腾讯-基于 webcomponent 容器 + iframe 沙箱 的 无界方案；

https://wujie-micro.github.io/demo-main-vue/home

虽然我们现在用的是 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年刚出的，功能更健全。唯一缺点可能是社区文档没那么多，出了问题，网上没那么多博客文档支持。