微前端技术方案调研（qiankun、micro-app、wujie）

前言

更新时间：2023年05月22日++

微前端架构具备以下几个核心价值：(@reference 乾坤)

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

构建一个稳健的微前端项目，一般不考虑直接用iframe。 可以阅读 Why Not Iframe ?

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

对比

调研市面微前端的方案，从技术角度可以主要分为：single-spa、WebComponent。接下来，将从上手难度到原型环境做对比。

代表框架：

蚂蚁金服团队qiankun https://qiankun.umijs.org/zh/guide
京东零售团队 micro-app https://micro-zoe.github.io/micro-app/
腾讯无极低代码团队 wujie-micro https://wujie-micro.github.io/doc/

对比	single-spa	类WebComponent	WebComponent + iframe
框架	qiankun	micro-app	wujie-micro
首个版本	v1.1.4 (2019-08-01)	v0.1.0 (2021-07-09)	1.0.0-rc.1 (2022-07-05)
最近更新	v2.10.8 (2023-05-17)	v1.0.0-beta.4 (2023-04-27)	1.0.16 (2023-05-17)
ie	Yes	==No==	Yes，自动切换成iframe
接入成本	中	低	较低
开箱即用	==No==	==No==	Yes
数据通信机制	props	addDataListener	props、window、eventBus
js沙箱	Yes	Yes	Yes，iframe来实现js沙箱
样式隔离	Yes	Yes	Yes，webcomponent来实现页面的样式元素隔离
元素隔离	==No==	Yes	Yes
静态资源地址补全	==No==	Yes	==No==
预加载	Yes	Yes	Yes
keep-alive	==No==	Yes	Yes
应用共享同一个资源	Yes	Yes	Yes
应用嵌套	Yes	Yes	Yes
插件系统	==No==	Yes	Yes
子应用不改造接入	==No==	Yes	Yes，满足跨域可以不改
内置降级兼容处理	==No==	==No==	Yes，通过 babel 来添加 polyfill

选型建议

1. 考虑系统需要兼容 ie 浏览器场景
   wujie-micro > qiankun
2. 接入便捷度考虑
   wujie-micro > micro-app > qiankun
3. 框架稳定性 (框架成熟度)
   qiankun > micro-app > wujie-micro