当前位置: 首页 > 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; 四、泛型类 五、泛型方法 六、思考 七、疑惑 一、前言 泛型对于我来说又…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...