初识微前端

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

微前端架构的优势包括

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

一、微前端的前世今生

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

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

  • 模块级别独立使用
  • 技术栈无关
  • 独立开发,独立部署 后端是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组合使用不过可以把它作为一个代码共享的工具。

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

相关推荐
万少5 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
爱奥尼欧8 分钟前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft
OpenGL11 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0226 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang28 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景30 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼30 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿32 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再35 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
戒不掉的伤怀35 分钟前
【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】
服务器·数据库·mysql