微前端一:技术选型

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 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年刚出的,功能更健全。唯一缺点可能是社区文档没那么多,出了问题,网上没那么多博客文档支持。

相关推荐
Myli_ing1 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维18 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_32 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~39 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ43 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue