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

前言

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

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

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

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

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

对比

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

代表框架：

蚂蚁金服团队qiankun 
京东零售团队 micro-app 
腾讯无极低代码团队 wujie-micro 
对比single-spa类WebComponentWebComponent + 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
posted @ 2023-08-09 11:14  mingruqi  阅读(1049)  评论(0)    收藏  举报