当前位置: 首页 > news >正文

微前端架构及其解决方案对比

微前端架构及其解决方案对比

微前端架构是一种通过将大型前端应用拆分为多个独立的、可单独部署的小型应用的设计模式。随着这种模式的流行,诞生了多种微前端实现方案,每个方案都有其独特的特点和适用场景。以下是常见的微前端解决方案及其优缺点对比,并提供了每个方案的官方网址,方便参考。

1. iframe

iframe 是一种最早期的微前端实现方式,它允许在主应用中嵌入独立的子应用,并通过 iframe 标签加载不同的 URL。

优点:
  • 简单易用:无需对子应用进行额外改造,直接嵌入即可。

  • 技术栈无关:子应用可以使用任意前端技术,互相完全独立。

  • 隔离性强iframe 自带样式和 JavaScript 隔离。

缺点:
  • 用户体验差iframe 切换有明显的闪屏现象,加载性能较差。

  • 跨域通信复杂:主应用和子应用之间的数据共享困难,需处理跨域问题。

  • SEO 不友好iframe 内容无法被搜索引擎有效抓取。

适用场景:
  • 子应用之间完全独立、不需要频繁交互的场景。

官方网址:
  • HTML Iframe Documentation


2. 基于路由的微前端

通过前端路由切换,将不同的子应用嵌入到主应用的路由体系中,主应用负责全局布局和路由管理,子应用通过路由按需加载。

优点:
  • 用户体验良好:路由切换流畅,与传统单页应用相似。

  • 技术栈灵活:支持不同技术栈的子应用,如 Vue、React 等。

  • 资源按需加载:可根据路由动态加载子应用,减少初次加载时间。

缺点:
  • 依赖管理困难:主应用和子应用的全局依赖管理需要手动处理,可能产生版本冲突。

  • 样式冲突:子应用的样式可能影响主应用或其他子应用,需自行处理样式隔离。

  • 状态共享困难:应用间状态共享和通信较复杂。

适用场景:
  • 需要子应用间保持一定交互和状态同步的项目,适用于多个页面的应用集成。

官方网址:
  • Vue Router

  • React Router


3. Webpack 5 Module Federation

Webpack 5 引入的 Module Federation 特性,允许多个应用共享模块,子应用可以在不重新构建的情况下被主应用加载和使用。

优点:
  • 模块共享:可以复用多个应用间的相同模块,避免重复加载资源,优化性能。

  • 独立构建与部署:子应用可以单独构建、独立部署,但仍能与主应用动态协作。

  • 灵活的动态加载:通过 Webpack 的动态模块加载,按需引入远程模块。

缺点:
  • 配置复杂:Module Federation 的配置较为复杂,尤其是涉及共享依赖和模块冲突时。

  • 技术栈要求:必须使用 Webpack 5,限制了技术栈的选择。

  • 样式冲突:子应用样式需要额外处理以防止全局样式污染。

适用场景:
  • 适用于多个子应用间存在大量共享模块和依赖的大型项目。

官方网址:
  • Webpack Module Federation


4. Single-SPA

Single-SPA 是一个用于构建微前端的框架,它允许多个前端框架应用(如 Vue、React、Angular)同时工作在同一个页面上。

优点:
  • 技术栈独立:每个子应用可以使用不同的框架,技术栈灵活。

  • 共享依赖:提供依赖共享机制,避免多个应用加载相同的依赖包。

  • 生态完善:丰富的社区插件和工具,支持复杂的微前端架构需求。

缺点:
  • 学习曲线陡峭:Single-SPA 的概念和配置较为复杂,需要专门学习。

  • 性能问题:同时加载多个子应用时,性能可能受影响,需手动优化。

  • 开发复杂度高:管理多个框架和应用时,开发难度较大。

适用场景:
  • 适合多团队协作,且项目中需要多技术栈共存的复杂微前端场景。

官方网址:
  • Single-SPA


5. Qiankun

Qiankun 是基于 Single-SPA 实现的微前端解决方案,提供了更加简单的 API 和丰富的功能,尤其适合 Vue 和 React 等流行前端框架。

优点:
  • 开箱即用:简化了 Single-SPA 的复杂配置,提供了更易用的 API。

  • 技术栈独立:支持多种技术栈应用,无论是 Vue、React 还是 Angular,都可以无缝集成。

  • 状态共享与样式隔离:内置了沙箱机制,解决了微前端中常见的样式冲突和状态共享问题。

缺点:
  • 性能瓶颈:虽然有较好的性能优化,但多个子应用同时加载时,依然可能出现性能问题。

  • 依赖冲突:不同子应用使用不同版本的依赖库时,可能会导致冲突。

  • 特定场景局限性:在某些复杂的业务场景下,可能无法完全满足定制化需求。

适用场景:
  • 特别适合中大型企业级项目,尤其是 Vue 和 React 技术栈的场景。

官方网址:
  • Qiankun


6. Garfish

Garfish 是字节跳动推出的一款微前端框架,专注于轻量级和高性能的微前端解决方案。

优点:
  • 零配置:无需复杂的配置即可使用,适合快速开发。

  • 轻量高效:性能优越,适合对速度有要求的项目。

  • 技术栈无关:支持多种前端框架,灵活性高。

缺点:
  • 社区支持有限:相对于其他成熟的微前端方案,Garfish 的社区支持和文档相对较少。

  • 定制化能力有限:在一些复杂场景下可能需要额外的开发工作。

适用场景:
  • 适合需要快速开发和集成的中小型项目,尤其是对性能要求高的场景。

官方网址:
  • Garfish


7. EMP (Esm Module Federation)

EMP 是基于 Webpack 5 Module Federation 特性进行二次封装,特别优化了对 ESM(ECMAScript Modules)的支持,进一步提升了微前端应用的性能和灵活性。

优点:
  • ESM 模块支持:完全支持 ESM 模块系统,减少模块解析开销,提高加载效率。

  • 简化配置:相比 Webpack 5 原生的 Module Federation,EMP 对其进行了封装,使配置更加简便。

  • 按需加载:可以动态按需加载模块,提升性能。

缺点:
  • 学习曲线:虽然配置简化,但依然需要掌握 Module Federation 的核心概念。

  • 技术栈限制:需要使用 Webpack 5,且子应用需支持 ESM 模块。

  • 社区支持较少:与其他微前端方案相比,EMP 的社区支持较为有限。

适用场景:
  • 当项目需要大量模块共享和资源复用,且对性能优化要求较高时。

官方网址:
  • EMP 官方文档


8. 无界

无界是腾讯提出的一种微前端解决方案,专注于解决跨团队协作和独立开发问题。无界提供了独立子应用开发、部署和集成的方式,允许多个团队并行开发。

优点:
  • 技术栈无关:不同子应用可以使用任意前端技术栈,灵活性高。

  • 团队独立开发:每个团队可以独立开发和部署自己的子应用,减少团队间耦合。

  • 隔离机制

:提供了样式和状态的隔离机制,避免了不同子应用间的相互影响。

缺点:
  • 学习曲线:对于新加入的团队成员,可能需要一定的学习时间来熟悉框架。

  • 性能管理:在性能管理上可能需要额外的优化。

适用场景:
  • 适合大型项目,尤其是需要多个团队并行开发的情况。

官方网址:
  • 无界


微前端解决方案总结表格

方案优点缺点适用场景官方网址
iframe- 简单易用
- 技术栈无关
- 隔离性强
- 用户体验差
- 跨域通信复杂
- SEO 不友好
- 子应用之间完全独立且不需频繁交互的场景HTML Iframe Documentation
基于路由的微前端- 用户体验良好
- 技术栈灵活
- 资源按需加载
- 依赖管理困难
- 样式冲突
- 状态共享困难
- 需要子应用间保持一定交互和状态同步的项目Vue Router
React Router
Webpack 5 Module Federation- 模块共享
- 独立构建与部署
- 灵活的动态加载
- 配置复杂
- 技术栈要求
- 样式冲突
- 适用于多个子应用间存在大量共享模块和依赖的大型项目Webpack Module Federation
Single-SPA- 技术栈独立
- 共享依赖
- 生态完善
- 学习曲线陡峭
- 性能问题
- 开发复杂度高
- 多团队协作,且项目中需要多技术栈共存的复杂微前端场景Single-SPA
Qiankun- 开箱即用
- 技术栈独立
- 状态共享与样式隔离
- 性能瓶颈
- 依赖冲突
- 特定场景局限性
- 特别适合中大型企业级项目,尤其是 Vue 和 React 技术栈的场景Qiankun
Garfish- 零配置
- 轻量高效
- 技术栈无关
- 社区支持有限
- 定制化能力有限
- 适合需要快速开发和集成的中小型项目,尤其是对性能要求高的场景Garfish
EMP (Esm Module Federation)- ESM 模块支持
- 简化配置
- 按需加载
- 学习曲线
- 技术栈限制
- 社区支持较少
- 需要大量模块共享和资源复用,且对性能优化要求较高时EMP 官方文档
无界- 技术栈无关
- 团队独立开发
- 完整生态
- 学习曲线
- 性能管理
- 适合大型项目,尤其是需要多个团队并行开发的情况无界

总结

微前端架构为现代前端开发带来了新的可能性,帮助团队更高效地应对复杂的开发挑战。在实际应用中,合理选择和灵活运用各种解决方案,将是推动项目成功的关键。通过这个表格,团队可以更清晰地对比不同的微前端解决方案,选择最适合自身需求的架构方案。

相关文章:

微前端架构及其解决方案对比

微前端架构及其解决方案对比 微前端架构是一种通过将大型前端应用拆分为多个独立的、可单独部署的小型应用的设计模式。随着这种模式的流行,诞生了多种微前端实现方案,每个方案都有其独特的特点和适用场景。以下是常见的微前端解决方案及其优缺点对比&a…...

git add操作,文件数量太多卡咋办呢,

git add介绍 Git的add命令是用于将文件或目录添加到暂存区(也就是索引库),以便在后续的提交(commit)操作中一并上传到版本库的。具体来说,git add命令有以下几种常见用法: 添加单个文件&#…...

搭建Golang gRPC环境:protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

参考文章: 安装protoc、protoc-gen-go、protoc-gen-go-grpc-CSDN博客 一、简单介绍 本文开发环境,均为 windows 环境,mac 环境其实也类似 ~ ① 编译proto文件,相关插件 简单介绍: protoc 是编译器,用于将…...

Spring Boot 核心理解-自动装配

自动装配 spring boot的自动装配(auto configuration)是通过spring framework的依赖注入(dependency injection, DI)和配置类的组合来实现的。 spring boot 的自动装配机制可以简化应用的配置过程,是开发者不再需要手…...

go 中指针的执行效率比较

package main import ("fmt""time" ) type Books struct {title stringauthor stringsubject stringbook_id int } func main() {start : time.Now() // 记录开始时间var Book1 Books /* 声明 Book1 为 Books 类型 */var Book2 Books /* 声明…...

单链表的经典算法OJ

目录 1.反转链表 2.链表的中间节点 3.移除链表元素 ——————————————————————————————————————————— 正文开始 1.反转链表 typedef struct ListNode ListNode; struct ListNode* reverseList(struct ListNode* head) {//判空if(…...

视频网站开发:Spring Boot框架的高效实现

5 系统实现 5.1用户信息管理 管理员管理用户信息,可以添加,修改,删除用户信息信息。下图就是用户信息管理页面。 图5.1 用户信息管理页面 5.2 视频分享管理 管理员管理视频分享,可以添加,修改,删除视频分…...

【前端】如何制作一个自己的网站(11)

接上文。 除了前面的颜色样式外,字体样式和文本样式也是网页设计中的重要组成部分。 合适的字体和文本排版,不仅可以使页面更加美观,也可以提升用户体验。接下来,我们先来看看CSS如何设置字体样式。 字体样式 同时设置了字体样…...

【Conda】提高 Conda 下载速度与兼容性的完美指南

这里写目录标题 引言1. Conda 官方源1.1 常用官方源1.2 源的选择1.3 源的作用 2. 设置 Conda 源2.1 查看当前配置2.2 添加新的源2.3 设置源的优先级2.4 移除源2.5 示例:设置使用 conda-forge 3. 使用中国镜像源3.1 常用中国镜像源3.2 设置中国镜像源3.3 验证镜像源设…...

【Flutter】页面布局:层叠布局(Stack、Positioned)

在 Flutter 中,布局系统提供了多种方式来管理 UI 元素的排列方式。其中,Stack 和 Positioned 是非常重要的布局组件,允许开发者将子组件按层叠方式(即堆叠)布局,使得组件可以相互重叠。通过使用 Stack 和 P…...

SpringBoot实现的汽车票在线预订系统

2相关技术 2.1 MySQL 数据库 MySQL 是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非…...

集合框架14:TreeSet概述、TreeSet使用、Comparator接口及举例

视频链接:13.29 TreeSet概述_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1zD4y1Q7Fw?spm_id_from333.788.videopod.episodes&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5&p29 1、TreeSet概述 基于排列顺序实现元素不重复;实现了Sort…...

uniapp获取底部导航tabbar的高度(H5)

uniapp获取底部导航tabbar的高度&#xff08;H5&#xff09; <view :style"bottom: tabBarHeight px;"> </view>tabBarHeight: 0, // 底部tabBar高度&#xff0c; h5// #ifdef H5 getTabBarHeight(){const systemInfo uni.getSystemInfoSync()this.t…...

接口测试 —— 如何测试加密接口?

接口加密是指在网络传输过程中&#xff0c;将数据进行加密&#xff0c;以保护数据的安全性。接口加密可以采用多种加密算法&#xff0c;如AES、DES、RSA等。测试接口加密的目的是验证接口加密算法的正确性和安全性。以下是一些详细的测试方法和注意事项&#xff1a; 接口加密字…...

033 商品搜索

文章目录 SearchController.javaPage.javaSpuInfoServiceImpl.javaSpuInfoService.javaCubemallSearchApplication.javasearch.htmlpom.xml 功能分析 页面回显的数据&#xff1a; searchMap keywords&#xff1a;搜索的关键词 brand&#xff1a;过滤条件-品牌 category&…...

身份证二要素实名认证接口-身份证核验接口-身份证实名API

接口简介&#xff1a;企业三要素验证&#xff0c;输入公司名称、统一社会信用代码、法人姓名验证是否一致 接口地址&#xff1a;https://www.wapi.cn/api_detail/62/169.html 在线核验&#xff1a;https://www.wapi.cn/icardauth.html 网站地址&#xff1a;https://www.wapi.cn…...

一次恶意程序分析

首先F12shift查看字符表 字符表发现可疑字符串 双击进入 再tab 进入这里 推测为main函数 可见一些可疑的api FindResourceW推测该木马使用了资源加载 VirtualAlloc申请内存 然后sub_1400796E0 有 dwSize 参数 推测为 拷贝内存 memcpy类似函数 、 然后sub_140078CB0函数 跟进函…...

Javaweb基础-vue

Vue.js Vue是一套用于构建用户界面的渐进式框架。 起步 引入vue <head><script src"static/js/vue2.6.12.min.js"></script> </head> 创建vue应用 <body> <div id"index"><p>{{message}}</p> </div>…...

2. MySQL数据库基础

一、数据库的操作 1. 显示当前的数据库 SHOW DATABASES;2. 创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification...];//create_specification包括&#xff1a;[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_n…...

java集合进阶篇-《泛型》

个人主页→VON 收录专栏→java从入门到起飞 目录 一、前言 二、泛型的简要概述 三、泛型的基本概念 类型参数&#xff1a; 通配符&#xff1a; 边界&#xff1a; 使用泛型的好处&#xff1a; 四、泛型类 五、泛型方法 六、思考 七、疑惑 一、前言 泛型对于我来说又…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...