微前端:乾坤 、无界、single-spa、iframe对比

一、微前端框架概述

微前端框架是一种技术解决方案,旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用,每个微前端应用可以独立开发、测试、部署和运行,同时保持整体的协同工作和用户体验。这种架构类似于微服务架构,但专注于前端领域

二、常见的微前端框架

  1. qiankun(乾坤):由蚂蚁金服开发维护,基于Single-SPA,提供了技术栈无关、接入简单的特性。它支持Vue、React等多种前端框架,并且具有较低的改造成本和友好的开发体验。
  2. single-spa:是一个轻量级的JavaScript前端路由框架,专注于单页面应用(SPA)的路由管理。虽然它本身不是一个完整的微前端框架,但它是许多微前端实现的基础。
  3. iframe:虽然iframe本身不是一个微前端框架,但它经常被用作微前端的一种简单实现方式
  4. 无界:无界微前端框架是一款基于Web Components + iframe的微前端解决方案,它具备成本低、速度快、原生隔离、功能强等一系列优点。以下是对无界微前端框架的详细介绍

     共同点: 当路由切换的时候,可以去加载对应应用的代码,让其跑在容器里。

  • 具备加载和卸载子应用的能力,页面从一个子应用切换到另一个子应用时,能正常进行加载和渲染;
  • 具有路由状态保持能力,激活子应用后,浏览器刷新、前进、后退子应用的路由都可以正常工作;
  • 主应用和子应用、子应用和子应用之间可以相互进行通信
  • 每个微应用都可独立仓库管理,独立技术栈开发、独立部署、独立运行

三、各微前端框架对比

特性qiankun无界single-spaiframe
技术栈支持技术栈无关,支持React、Vue、Angular等基于WebComponent,支持多种技术栈技术栈无关,支持多种前端框架技术栈无关,但集成需考虑兼容性
接入方式简单,通过JS API接入较为简单,通过WebComponent封装复杂,需配置single-spa生命周期简单,通过HTML标签嵌入
沙箱隔离提供JS沙箱和样式隔离使用WebComponent天然隔离需开发者自行实现沙箱隔离iframe天然隔离
路由管理支持路由状态保持,可配置路由映射支持虚拟路由,保持路由状态作为顶层路由,需自行管理子应用路由路由由iframe内应用自行管理
应用通信提供父子应用及子子应用间通信机制提供组件式API,支持通信需开发者自行实现通信机制可通过postMessage或URL参数等方式通信
资源预加载支持静态资源预加载支持静态资源预加载支持延迟加载应用不支持预加载,按需加载
性能影响较低,通过沙箱和懒加载优化较低,但WebComponent可能有性能开销较低,但依赖应用的优化较高,iframe加载和渲染开销较大
开发体验较好,提供了丰富的API和文档较好,组件式API更直观一般,需自行处理很多细节较好,易于集成现有应用
生产可用性经过验证,适用于生产环境适用于生产环境,但社区支持可能较少适用于生产环境,需开发者自行完善适用于生产环境,但需谨慎处理安全性和性能问题
适配成本较高,需适配路由、生命周期等适中,主要适配WebComponent较高,需深入理解single-spa架构较低,但需注意兼容性和性能问题

微前端框架为前端应用的开发带来了诸多优势,如技术栈无关性、独立开发和部署、增量升级等。然而,它也存在一定的缺点,如接入难度高、资源共享能力差等。因此,在选择是否使用微前端框架时,需要根据项目的具体需求和团队的技术能力进行综合考虑。同时,在实际应用中,还需要注意微前端框架的选型、架构设计、代码管理等方面的问题,以确保项目的顺利进行和系统的稳定运行。

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

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

相关文章

go 的HTTP请求处理

使用 Go 处理 HTTP 请求主要涉及两件事:ServeMuxes 和 Handlers。 ServeMux本质上是一个 HTTP 请求路由器(或多路复用器)。它将传入的请求与预定义的 URL 路径列表进行比较,并在找到匹配时调用路径的关联 handler。handler 负责写…

05 以物品与用户为基础个性化推荐算法的四大策略

《易经》:“九二:见龙在田,利见大人”。九二是指阳爻在卦中处于第二位,见龙指龙出现在地面上,开始崭露头角,但是仍须努力,应处于安于偏下的位置。 本节是模块二第一节,模块二讲解传…

Vue3.0中实现的动态路由权限控制

文章目录 前言功能分析代码详细解释 前言 动态路由权限控制是项目常用的功能,这里介绍一种方式,通过将后端权限码与本地路由的JSON配置ID进行匹配,能够有效地实现用户权限的控制。不同角色的操作项是根据权限码匹配到的路由进行区分的&#…

Python中的数据结构:五彩斑斓的糖果盒

在Python编程的世界里,数据结构就像是一个个五彩斑斓的糖果盒,每一种糖果都有其独特的味道和形状。这些多姿多彩,形状和味道各异的糖果盒子包括了:List(列表)、Tuple(元组)、Diction…

如何保证数据库和redis的数据一致性

1、简介 在客户端请求数据时,如果能在缓存中命中数据,那就查询缓存,不用在去查询数据库,从而减轻数据库的压力,提高服务器的性能。 2、问题如何保证两者的一致性 先更新数据库在删除缓存 难点:如何保证…

微信小程序,订阅消息

微信小程序,订阅消息,完整流程 1.选择需要的模版 2.前端调用订阅消息 注:tmplIds:模板ID模版id,这里也可以选多个 wx.requestSubscribeMessage({tmplIds: [7UezzOrfJg_NIYdE1p*******],success (res) { console.log(res);wx.g…

一款简单的音频剪辑工具

Hello,大家好呀,我是努力搬砖的小画。 今天小画给大伙分享一款强大的音频剪辑工具--【剪画】,无需下载就能使用,支持对MP3、M4A、AAC等多种格式文件进行剪辑、分割、拼接、混音、变声、淡入淡出、音频格式转换、视频转音频、消除…

Hive 函数

分类 Hive 的函数分为两大类:内置函数(Built-in-Functions)、用户自定义函数(User-Defined-Functions);内置函数可分为:数值类型函数、日期类型函数、字符串类型函数、集合函数等;用…

基于粒子滤波和帧差法的目标跟踪matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 帧差法 4.2 粒子滤波 4.3 粒子滤波与帧差法的结合 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 原重采样方法: 改进重采样方法: 2.算法…

1.30、基于卷积神经网络的手写数字旋转角度预测(matlab)

1、卷积神经网络的手写数字旋转角度预测原理及流程 基于卷积神经网络的手写数字旋转角度预测是一个常见的计算机视觉问题。在这种情况下,我们可以通过构建一个卷积神经网络(Convolutional Neural Network,CNN)来实现该任务。以下…

铁威马教程丨如何收集NAS的日志

适用版本: 适用于TOS 5.0.xxx、TOS5.1.xxx版本。 适用机型: TNAS型号(除F2-210、F4-210) 故障现象: 当TNAS宕机导致网页不可访问且PC无法搜索到该设备时,重启后TOS网页的系统报告缺失相关日志,不利于异常…

try-catch-finally使用注意事项

1.catch块和finally块可以省略其中一个。 2.finally块在try和catch的return之前执行。(return时会暂存,执行finally后再return) 如果finally中有return,那就直接return了。 /*** 省略finally 语句块*/public static void omitFina…

第一百六十八节 Java IO教程 - Java Zip文件

Java IO教程 - Java Zip文件 Java对ZIP文件格式有直接支持。通常,我们将使用java.util.zip包中的以下四个类来处理ZIP文件格式: ZipEntryZipInputStreamZipOutputStreamZipFile ZipEntry对象表示ZIP文件格式的归档文件中的条目。 zip条目可以是压缩的…

大部分公司都是草台班子,甚至更水

我第一份实习是在一家咨询公司,我以为我们能够给我们的客户提供极具商业价值的战略指导,但其实开始干活了之后,发现我们就是PPT和调研报告的搬运工。后来我去了一家互联网大厂,我以为我的身边全都是逻辑超强的技术和产品大佬&…

20240715题目

589. N 叉树的前序遍历 给定一个 n 叉树的根节点 root &#xff0c;返回 其节点值的 前序遍历 。 n 叉树 在输入中按层序遍历进行序列化表示&#xff0c;每组子节点由空值 null 分隔&#xff1b; /* // Definition for a Node. class Node { public:int val;vector<Node*…

先“精益”,还是先“信息化”

在当今这个快速变化、竞争激烈的制造业时代&#xff0c;工厂的高效运营与持续创新成为了企业脱颖而出的关键。而工厂精益管理与信息化系统&#xff0c;正是这两把推动企业转型升级的利器&#xff0c;它们相辅相成。 精益管理&#xff0c;作为一种以消除浪费、提升价值为核心的…

pgsql(guass)可获取到对应的表名称、字段名称、注释、字段类型

pgsql可获取到对应的表名称、字段名称、注释、字段类型(GUASS的也是适用) SELECT c.relname as 表名,a.attname as 字段名,format_type(a.atttypid,a.atttypmod) as 类型,a.attnotnull as 非空, col_description(a.attrelid,a.attnum) as 注释 FROM pg_class as c,pg_attri…

[ACM独立出版] 2024年虚拟现实、图像和信号处理国际学术会议(VRISP 2024,8月2日-4)

2024年虚拟现实、图像和信号处理国际学术会议&#xff08;VRISP 2024&#xff09;将于2024年8月2-4日在中国厦门召开。 VRISP 2024将围绕“虚拟现实、图像和信号处理”的最新研究领域&#xff0c;为来自国内外高等院校、科学研究所、企事业单位的专家、教授、学者、工程师等提供…

llama-cpp-python

文章目录 一、关于 llama-cpp-python二、安装安装配置支持的后端Windows 笔记MacOS笔记升级和重新安装 三、高级API1、简单示例2、从 Hugging Face Hub 中提取模型3、聊天完成4、JSON和JSON模式JSON模式JSON Schema 模式 5、函数调用6、多模态模型7、Speculative Decoding8、Em…

【Leetcode】二十一、前缀树 + 词典中最长的单词

文章目录 1、背景2、前缀树Trie3、leetcode208&#xff1a;实现Trie4、leetcode720&#xff1a;词典中最长的单词 1、背景 如上&#xff0c;以浏览器搜索时的自动匹配为例&#xff1a; 如果把所有搜索关键字放一个数组里&#xff0c;则&#xff1a;插入、搜索一个词条时&#x…