微前端一:技术选型

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/107396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试题-React(十二):React中不可变数据的力量

一、不可变数据的概念 不可变数据意味着数据一旦创建,就不能被更改。在React中,每次对数据的修改都会返回一个新的数据副本,而不会改变原始数据。这种方式确保了数据的稳定性和一致性。 二、Props中的不可变数据 在React中,组件…

TikTok国际版 使用特网科技Bluestacks模拟器安装方法

特网科技Bluestacks模拟器主机 桌面自带Bluestacks模拟器 TikTok国际版Bluestacks模拟器搜索tiktot 登录google应用商店-安装TikTok 安装过程可能需要3-5分钟不等-配置过低可能会导致安装失败,建议升级更高内存。 安装完成-打开 安装成功APP-我的游戏查看 打开国际版…

【Docker 内核详解】namespace 资源隔离(二):UTS namespace IPC namespace

【Docker 内核详解 - namespace 资源隔离】系列包含: namespace 资源隔离(一):进行 namespace API 操作的 4 种方式namespace 资源隔离(二):UTS namespace & IPC namespacenamespace 资源隔…

风电厂VR情景式三维模拟实训系统让教育更加贴近实际

VR虚拟仿真实训室是一种利用虚拟现实技术和仿真技术,为教学和学生实训提供虚拟环境和实践机会的设施。它通过将学生置身于虚拟场景中,让他们可以身临其境地参与到实际场景中,从而提高实际操作能力和技能水平。 在教学方面,VR虚拟仿…

rust: function

///file: nestd.rs ///ide: RustRover 233.8264.22 /// /// /// /***自定义函数*/ pub fn function() {println!("called my::nested::function()"); }#[allow(dead_code)] fn private_function() {println!("called my::nested::private_function()"); }/…

一百八十九、ClickHouse——在海豚调度器中执行ClickHouse建库建表语句

一、目的 由于Hive处理好的结果数据要同步到ClickHouse中,因此需要在在海豚调度器中执行ClickHouse的ADS层的建库建表语句 二、执行步骤 (一)情形一:ClickHouse和海豚在同一服务器上 1、直接在海豚中创建执行SQL文件脚本的工作…

php实现无限级分类的树形结构

数据结构和方法如下: $items array(1 > array(id > 1, pid > 0, name > 江西省),2 > array(id > 2, pid > 0, name > 黑龙江省),3 > array(id > 3, pid > 1, name > 南昌市),4 > array(id > 4, pid > 2, name > …

iOS代码混淆-从入门到放弃

​ 目录 1. 什么是iOS代码混淆? 2. iOS自动代码混淆的方法是什么? 3. iOS代码混淆的作用是什么? 4. 怎么样才能做到更好的iOS代码混淆? 总结 参考资料 1. 什么是iOS代码混淆? 代码混淆是指将程序中的方法名、属…

ggplot2 -- geom_linerange 函数的简单使用

brief 需要三个参数确定一个直线,x轴位置,y轴起始位置,y轴结束位置。 有别于一些垂直辅助线,可以实现柱状图,瓷砖图等等。 example 实现柱状图 library(tidyverse)tibble(theta seq(from 0, to 1, by .1),prio…

Jmeter之Bean shell使用详解

一、什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法;BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanShell是用Java写成的,一个小型的、免费的、可以下载的、嵌入式的Java源代码解释器,具有对象脚本语言特性,非常精…

MySQL 约束,视图,索引及常见函数

​​​​​​ ​​​​​​​ 2-MySQL 约束,视图,索引及常见函 1 SQL约束 SQL 约束用于规定表中的数据规则。实际上就是表中数据的限制条件。是为了保证数据的完整性而实现的一套机制。 MySQL的约束种类如下: 非空约束:NOT NULL NOT NULL约束强制…

私有化部署AI智能客服,解放企业成本,提升服务效率

在信息时代,企业面临着服务效率提升和成本压力的双重挑战。作为一个领先品牌,WorkPlus致力于为企业提供私有化部署的AI智能客服解决方案。本文将深入探讨WorkPlus AI智能客服如何帮助企业解放成本、提升服务效率以及打造个性化的卓越客户体验。 AI智能客…

安全典型配置(三)使用ACL禁止特定用户上网案例

【微|信|公|众|号:厦门微思网络】 安全典型配置(一)使用ACL限制FTP访问权限案例_厦门微思网络的博客-CSDN博客本例中配置的本地用户登录密码方式为irreversible-cipher,表示对用户密码采用不可逆算法进行加密,非法用…

分类预测 | MATLAB实现SSA-CNN-LSTM-Attention数据分类预测

分类预测 | MATLAB实现SSA-CNN-LSTM-Attention数据分类预测 目录 分类预测 | MATLAB实现SSA-CNN-LSTM-Attention数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现WOA-CNN-LSTM-Attention数据分类预测,运行环境Matlab2021b及以…

python+opencv+机器学习车牌识别 计算机竞赛

0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 基于机器学习的车牌识别系统 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:4分工作量:4分创新点:3分 该项目较为新颖,适…

mysql查询当天,近一周,近一个月,近一年的数据

1.mysql查询当天的数据 select * from table where to_days(时间字段) to_days(now()); 2.mysql查询昨天的数据 select * from table where to_days(now( ) ) - to_days( 时间字段名) 1 3.mysql查询近一周的数据 SELECT * FROM table WHERE date(时间字段) > DATE_SU…

Studio One6.5最新版本新增了对Linux的支持

音乐制作人们,这是你们翘首以待的消息。数字音频工作站(DAW)已经成为音乐制作专业人士重要工具之一。 遗憾的是,对于 Linux 用户而言,选择十分有限。最受欢迎的选择通常是开源 DAW,如 Ardour、Audacity和闭…

【go学习笔记】Go errors 最佳实践

文章目录 一、Error Type1. Sentinel Error(预定义Error字符串错误值)1.1 缺点 2. Error types(错误类型)2.1 缺点 3. Opaque errors(不透明错误)3.1 Assert errors for behaviour, not type 二、Handling …

RabbitMQ的5种模式——再探RabbitMQ的模式,简单、工作,发布订阅(广播),路由、主题 页面分析

前言 RabbitMQ作为一款常用的消息中间件,在微服务项目中得到大量应用,其本身是微服务中的重点和难点,有不少概念我自己的也是一知半解,本系列博客尝试结合实际应用场景阐述RabbitMQ的应用,分析其为什么使用&#xff0…

【SpringCloud-11】SCA-sentinel

sentinel是一个流量控制、熔断降级的组件,可以替换第一代中的hystrix。 hystrix用起来没有那么方便: 1、要在调用方引入hystrix,没有ui界面进行配置,需要在代码中进行配置,侵入了业务代码。 2、还要自己搭建监控平台…