初识微前端

        微前端:微前端是一种软件架构模式,旨在解决大型前端应用程序开发和维护中的复杂性问题。它将前端应用程序拆分成更小的、独立的部分,每个部分可以由不同的团队开发、测试、部署和维护。这些独立的部分可以是单独的应用程序或者功能模块,它们可以独立开发和部署,但最终集成到一个统一的用户界面中。

微前端架构的优势包括

  • 团队独立性: 不同团队可以独立开发、测试和部署自己的微前端应用,减少团队之间的合作和依赖。
  • 技术栈灵活性: 可以根据项目需求和团队技术偏好选择不同的技术栈,提高开发效率和质量。
  • 代码复用性: 可以将通用的功能和组件抽象为独立的微前端应用,实现代码复用和模块化开发。
  • 系统可扩展性: 微前端架构可以根据业务需求动态地添加、删除或替换微前端应用,实现系统的可扩展性和可维护性。

一、微前端的前世今生 

前后端模块架构经历了前后端不分离-前后端分离-后端微模块-前端微前端等历程。 随着团队规模的不断增大,"巨石应用"的诞生,新技术栈的升级牵一发而动全身。业务线的增加和团队分工的划分,前端开始需要做集成和拆分。 

二、微前端的理想状态及局限 

  • 模块级别独立使用
  • 技术栈无关
  • 独立开发,独立部署 后端是UI和执行过程无关的,只关心数据,所以做微服务拆分比较清晰,前端因为运行在一个浏览器环境中,加上UI也需要统一,数据需要通信,还有资源加载和冲突等等考虑因素,目前的微前端方案大部分只能支持到页面集成,对于模块级的处理仍比较困难。

三、微前端的现状和现有的解决方案 

微前端很多时候是要和老旧程序打交道的,而不是新的应用程序就是设计成微前端。 目前有四种思路:

  • webComponent
  • Micro-APP
  • Iframe(过于旧,有很多问题
  • 模块联邦(过于新,对开发者素质要求高
  • single-SPA(既是解决方案,也是一个框架)
  • QIANKUN 

Iframe 

四、局限与缺点 

1.DOM不共享

2.URL与内容不能做联动

3.全局上下文隔离,优点和缺点共存,优点是两个应用之间的状态不会互相影响,缺点是通信困难(比如登陆状态不能共享,子应用需要再登陆一次)

4.创建元素速度慢,浏览器上下文需要重建,资源需要重新加载

5.SEO不友好,无障碍读取困难,可用性降低

6.样式隔离

7.跨域限制

8.安全问题(使用不当容易造成XSS攻击)

9.路由会导致重新加载iframe页面,页面刷新而不是组件切换

五、single-SPA 

方案:把一个子应用看成是一个单页应用的页面。每个子应用导出生命周期函数,由应用容器(父应用)调用和传值。相当于使用了子应用打包之后的产物(JS代码),它仅仅是实现了路由和应用入口,解决了上下文隔离的问题,其他微前端需要处理的问题都没有实现。

single-SPA也是基于页面集成的。

六、阿里 QianKun 

阿里提供的框架,基于single-SPA的二次开发,中心思想也是容器-子应用思路,single没有考虑到子应用所需要的资源都打包到JS中过大问题,QK利用了每次打包之后的 index-html,读取之后将其放在基座应用中。遇到JS,CSS之后再读一次,单独处理。路由规则和应用入口还是基于singleSPA的,打包之后还是导出一个生命周期,在应用基座中还是跑生命周期,只不过不再读取打包后的JS了,而是读取indexhtml。 QK依旧是基于页面集成,达不到基于某个模块做集成。

QK在single基础上做了很多额外的处理工作:

1.CSS隔离

2.JS隔离

3.路由状态

4.通信方式

5.预加载

七、京东 Micro-APP 

基于WebComponent的H5方案,和QK一样,MA也是读取index Html,也是基于页面集成的,其实就是把HTMl当作入口,再读取里面的内容。通过Eval执行里面的 JS,其他的模块和QK一模一样。 

八、WebPack5 模块联邦 module Federation 

必须基于webpack5+(技术栈相关),属于微模块级别,能做到把A应用的B模块嵌入C应用中。

基于Single系列都有一个共同的要求,都需要一个应用容器来承载子应用。但模块联邦方案不需要基座应用,它是去中心化的。

缺点:

1.技术栈相关,违背微前端的初衷和要求,比如vite项目就无法集成过来。

2.对团队成员水平有要求。现在的集成很多时候都是业务集成,如果没有基座应用去中心化,人员水平参差不齐会难以控制。

模块联邦出现的时间还太短,单独做微前端方案不够成熟。可以和QK,MA组合使用不过可以把它作为一个代码共享的工具。

总结:总的来说,微前端架构可以有效地解决大型前端应用开发和维护中的复杂性问题,提高团队的灵活性、效率和协作性。

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

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

相关文章

java:遍历目录文件

/*** 通过递归遍历目录下的所有内容,并把所有文件的绝对路径输出在控制台** 思路:* 1.根据给定的路径创建一个File对象* 2.定义一个方法,用于获取给定目录下所有内容,参数为第一步创建的file对象* 3.获取给定的File目录下的文件或…

若依集成mybatis-plus 超详细教程(亲测可用)

文章目录 简介步骤第一步第二步第三步第四步第五步第六步 使用QueryWrapperservice层impl 实现接口类层Mapper层 简介 话不多说 直接跟着下面的教程操作,如果有报错私信我,或者通过博文下面的微信名片加我微信,免费解答哦! 步骤 …

代码随想录Day 42|Leetcode|Python|121. 买卖股票的最佳时机 ● 122.买卖股票的最佳时机II

121. 买卖股票的最佳时机 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从…

如何处理Django项目中表数据的排序问题

如何处理Django项目中表数据的按时间排序问题 当我们在写一些项目如购物平台 , 图书管理系统等都会不可避免的遇到排序问题 , 因为作者正在完成一个购物系统的项目 , 所以该文就以电商购物系统来举例说明 在utils文件夹中新建一个modle.py文件 , – utils文件夹主要存放一些非…

opencv图片的旋转-------c++

图片的旋转 /// <summary> /// 图片的旋转 /// </summary> /// <param name"img"></param> /// <param name"angle">旋转角度:正数&#xff0c;则表示逆时针旋转;负数&#xff0c;则表示顺时针旋转</param> /// <…

【吊打面试官系列】Java高并发篇 - 什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )?

大家好&#xff0c;我是锋哥。今天分享关于 【什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 什么是线程调度器(Thread Scheduler)和时间分片(TimeSlicing )&#xff1f; 线程调度器是一个操作系统…

深入理解nginx中的signal处理机制

1. 引言 在计算机系统中&#xff0c;信号处理是一项重要的任务&#xff0c;它允许操作系统和应用程序之间进行通信和协调。在网络服务器软件中&#xff0c;如Nginx&#xff0c;信号处理机制起着关键作用&#xff0c;它能够捕获和处理各种类型的信号&#xff0c;从而实现服务器的…

2024中国植物资源化妆品创新展在国家植物园成功举办

2024中国植物资源化妆品创新展&#xff08;简称国植美妆展&#xff09;于今年05月06日在北京国家植物园圆满落下帷幕。国植美妆展由中国广告协会化妆品工作委员会与中国抗衰老促进会化妆品产业分会指导&#xff0c;北京华晟德观文化科技发展有限公司主办&#xff0c;于03月30日…

安卓模拟器访问主机局域网

误打误撞能够访问主机局域网了 但是不太懂是因为哪一部分成功的 先记录一下 PC&#xff1a;mac系统 安卓编译器&#xff1a;Android Studio 步骤 只需要在PC上进行设置 1. 在【设置】中&#xff0c;打开已连接的Wi-Fi的【详细信息】 2. TCP/IP --> 配置IPv6&#xff0c;修…

前端组件库之ant-design-vue

在这里记录一个这个组件库我之前没有发现最近才发现的一个很好用的功能&#xff08;应该叫功能吧&#xff1f;&#xff09; 就是 这个flex弹性布局&#xff0c;之前在开发时&#xff0c;一直使用elementUI,是第一次使用这个组件库&#xff0c;所以没有发现这个功能这么好用 你…

第21天 反射

反射概述 想象一下&#xff0c;你在一个房间里边&#xff0c;但你看不见自己&#xff0c;也不知道自己是谁。这时候你面前有一个镜子&#xff0c;你可以通过镜子的反射来观察自己。反射就像这面镜子。它让你能够检查、分析、修改Java中的对象、类、方法等 使用情况&#xff1…

WPF控件之StackPanel布局控件

StackPanel别名堆栈panel 使其子元素按照一定方式进行布局&#xff0c;子元素排布方式要么设置为水平排布&#xff0c;要么垂直排布。 属性 Orientation设置排列方式(默认的是垂直排布) : Horizontal水平排布 Vertical 垂直排布 实例 <StackPanel Orientation"Vert…

视频号小店怎么做?店铺运营详细步骤讲解,全网独家

大家好&#xff0c;我是电商笨笨熊 视频号小店作为今年的电商黑马&#xff0c;下一个站在风口的项目&#xff0c;自是吸引了不少的玩家&#xff1b; 先不说视频号自身庞大的流量体系&#xff0c;单单是高客单的市场就值得尝试一把&#xff1b; 且当前视频号小店刚刚推出不久…

智慧文旅赋能旅游服务升级:以科技创新驱动行业变革,打造智慧化、个性化、高效化的旅游新体验,满足游客日益增长的多元化需求

目录 一、引言 二、智慧文旅的概念与内涵 三、智慧文旅在旅游服务升级中的应用 1、智慧旅游服务平台建设 2、智慧景区管理 3、智慧旅游营销 四、智慧文旅推动旅游行业变革的案例分析 案例一&#xff1a;某智慧旅游城市建设项目 案例二&#xff1a;某景区智慧化改造项目…

SpringBoot如何实现动态数据源?

在Spring Boot中实现动态数据源主要涉及到创建和管理不同的数据源&#xff0c;并在运行时根据需要切换。这可以通过编程方式配置Spring的AbstractRoutingDataSource来完成。下面我会逐步介绍如何实现动态数据源&#xff0c;并给出代码示例。 第1步&#xff1a;添加依赖 首先&…

学习Python的第3天:深入理解数据类型与控制结构

经过前两天的Python学习&#xff0c;我们已经对Python的基本语法和简单程序有了初步的了解。今天&#xff0c;我们将进一步深入Python的世界&#xff0c;探索数据类型和控制结构这两个核心概念。 1. 数据类型 Python是一种动态类型语言&#xff0c;这意味着我们不需要在声明变…

深度学习学习日记5.8

随着patch size的增大&#xff0c;图像的特征图分辨率会相应减小。这是因为更大的patch size意味着模型在每一步处理的区域更大&#xff0c;因此产生的特征图会更为粗糙。 具体来说&#xff1a; 较大的patch size会导致模型在每个步骤中将更大的区域视为一个单元&#xff0c;…

算法系列之快速排序最佳实践你知道吗

1.原理 快速排序采用"分而治之递归排序"的思想&#xff0c;对于一组数据&#xff0c;选择一个基准元素&#xff08;base&#xff09;&#xff0c;比如选择第一个、中间位置元素或最后一个元素&#xff0c;通过第一轮扫描&#xff0c;比base小的元素都在base左边&…

Redis简介和数据结构

目录 简介 进入之后身份认证才能使用 优点 用途&#xff1a; 数据结构 string string自动扩容 Redis中的简单动态字符串&#xff08;SDS&#xff09;具有以下优点&#xff1a; SDS数据的编码格式 比较&#xff1a; string 常用操作 分布式锁 使用情况&#xff0c;…

Dark Reader:夜间模式,启动!

名人说&#xff1a;一点浩然气&#xff0c;千里快哉风。 ——苏轼 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、介绍二、下载安装1、Chrome应用商店&#xff08;需科学&#xff09;2、第三方直链下载 三、使…