微前端一:技术选型

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

相关推荐
GIS程序媛—椰子5 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山28 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄2 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf3 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL3 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1114 小时前
css实现div被图片撑开
前端·css
薛一半4 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾4 小时前
CSS综合练习——懒羊羊网页设计
前端·css