什么是微前端架构?它有什么优缺点以及构建思路

什么是微前端架构?它有什么优缺点以及构建思路微前端是一种类似于微服务的架构 它将微服务的理念应用于浏览器端 即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用 各个前端应用还可以独立开发 独立部署

概念

前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为把多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。简单说就是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品。

微前端的好处

1.应用自治。只需要遵循统一的接口规范或者框架,以便于系统集成到一起,相互之间是不存在依赖关系的。

2.单一职责。每个前端应用可以只关注于自己所需要完成的功能。

3.技术栈无关。你可以使用 Angular 的同时,又可以使用 React 和 Vue。

微前端的缺点

  • 应用的拆分基础依赖于基础设施的构建,一旦大量应用依赖于同一基础设施,那么维护变成了一个挑战。
  • 拆分的粒度越小,便意味着架构变得复杂、维护成本变高。
  • 技术栈一旦多样化,便意味着技术栈混乱

微前端架构模式

微前端应用间的关系来看,分为两种:基座模式(管理式)、自组织式。分别也对应了两者不同的架构模式:

基座模式。
通过一个主应用,来管理其它应用。设计难度小,方便实践,但是通用度低。

自组织模式。
应用之间是平等的,不存在相互管理的模式。设计难度大,不方便实施,但是通用度高。

当前基座模式用的比较多。

设计理念

  • 中心化:应用注册表。这个应用注册表拥有每个应用及对应的入口。在前端领域里,入口的直接表现形式可以是路由,又或者对应的应用映射。
  • 标识化应用。 我们需要一个标识符来标识不同的应用,以便于在安装、卸载的时候,能寻找到指定的应用。一个简单的模式,就是通过康威定律来命名应用。
  • 应用生命周期管理。
  • 高内聚,低耦合。

生命周期

前端微架构与后端微架构的最大不同之处,也在于此——生命周期。微前端应用作为一个客户端应用,每个应用都拥有自己的生命周期:

  • Load,决定加载哪个应用,并绑定生命周期bootstrap,获取静态资源
  • Mount,安装应用,如创建 DOM 节点
  • Unload,删除应用的生命周期Unmount,卸载应用,如删除 DOM 节点、取消事件绑定

这部分的内容事实上,也就是微前端的一个难点所在,如何以合适的方式来加载应用——毕竟每个前端框架都各自不同,其所需要的加载方式也是不同的。当我们决定支持多个框架的时候,便需要在这一部分进入更细致的研究。

拆分应用

按技术拆分

  • 路由分发式。通过 HTTP 服务器的反向代理功能,来将请求路由到对应的应用上。
  • 前端微服务化。在不同的框架之上设计通讯、加载机制,以在一个页面内加载对应的应用。
  • 微应用。通过软件工程的方式,在部署构建环境中,组合多个独立应用成一个单体应用。
  • 微件化。开发一个新的构建系统,将部分业务功能构建成一个独立的 chunk 代码,使用时只需要远程加载即可。
  • 前端容器化。通过将 iFrame 作为容器,来容纳其它前端应用。
  • 应用组件化。借助于 Web Components 技术,来构建跨框架的前端应用。

微件(widget),指的是一段可以直接嵌入在应用上运行的代码,它由开发人员预先编译好,在加载时不需要再做任何修改或者编译。

而微前端下的微件化则指的是,每个业务团队编写自己的业务代码,并将编译好的代码部署(上传或者放置)到指定的服务器上,在运行时,我们只需要加载相应的业务模块即可。对应的,在更新代码的时候,我们只需要更新对应的模块即可

按业务拆分

  • 按照业务拆分。
  • 按照权限拆分。
  • 按照变更的频率拆分。
  • 按照组织结构拆分。利用康威定律来进一步拆分前端应用。
  • 跟随后端微服务划分。实践证明, DDD 与事件风暴是一种颇为有效的后端拆分模式,对于前端来说,它也颇有有效——直接跟踪后端服务。

每个项目都有自己特殊的背景,切分微前端的方式便不一样。即使项目的类型相似,也存在一些细微的差异。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/231081.html原文链接:https://javaforall.net

(0)
上一篇 2026年1月30日 上午11:01
下一篇 2026年1月30日 上午11:22


相关推荐

  • java 舆情分析_基于Java实现网络舆情分析系统研究与实现.doc[通俗易懂]

    java 舆情分析_基于Java实现网络舆情分析系统研究与实现.doc[通俗易懂]基于Java实现网络舆情分析系统研究与实现基于Java实现网络舆情分析系统研究与实现摘要:通过对各大门户网站、论坛和贴吧的留言和评论的爬取,录入后台数据库。用户可根据主题、内容进行搜索查看。通过利用中科院分词算法进行实现对爬去下来的内容进行分词处理,分词处理后的结果利用自行研究出来的基于权值算法实现的中文情感分析进行评论的倾向性分析,通过对句子结构和主张词以及情感副词的判断来对评论的情感倾向性做出…

    2026年2月5日
    5
  • 【转载】ASP.NET应用程序与页面生命周期

    【转载】ASP.NET应用程序与页面生命周期

    2021年11月21日
    39
  • Jlink接口引脚定义「建议收藏」

    Jlink接口引脚定义「建议收藏」做东西时经过上网找引脚图接线,mark一下,以备后用:

    2022年5月28日
    81
  • Teleport Ultra/Pro 1.72 安装+便携版(备份网站内容工具+离线网页浏览)[通俗易懂]

    Teleport Ultra/Pro 1.72 安装+便携版(备份网站内容工具+离线网页浏览)[通俗易懂]TeleportPro由美国TennysonMaxwell公司开发,曾被PCMagazine评为”编辑选择奖”、ZDNet评为五星。它可以完全或部分下载一个网站上的内容,使用户能够离线浏览;可以在硬盘上创建一个与原网站完全相同的镜象;可以在网站上寻找并下载某一类型的文件;可以探测并记录一个网站的所有网页和文件的清单;可以从一个中心网站探测每一个与之链接的网站。TeleportPro支持HTML4.0、CSS2.0、DHTML和Javaapplet,实现了能够处理所有类型网站上的文件;它可以同..

    2025年10月7日
    9
  • 2022 idea激活码(注册激活)

    (2022 idea激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年4月1日
    340
  • 数学经典思想:数学归纳法 理解+实战

    数学经典思想:数学归纳法 理解+实战导语 科学归纳法 大家应该听起来并不陌生 从初中到大学应该都有使用这种思想去解题的经历 只不过在不同阶段的学习中难度不同 理解程度不同 最近在做一些高数方面相关的练习的时候用到的蛮多的 所以今天拎出来在自我学习巩固的过程中也可以和大家分享讨论 1 定义科学归纳法 scienceinduc 在科学研究中运用归纳方法提出和建立假说 在实验基础上抽象和概括事物之间关系的一种科研方法

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号