首页  >  文章  >  web前端  >  微前端简介

微前端简介

WBOY
WBOY原创
2024-08-30 19:04:11736浏览

在微前端中,我们将一个整体应用程序划分为多个较小的应用程序。

每个应用程序负责整体应用程序的独特功能。
例如,
一个电子商务应用程序可以分为以下较小的独立微前端应用程序。

  • 产品列表
  • 购物车
  • 运送
  • 付款
  • 追踪
  • 客户服务等

为什么选择微前端?

  • 多个团队可以独立工作,专注于一个 MFE 应用。
  • 代码复用性非常高。
  • 每个团队可以自由选择自己的技术(React/Angular/Vue)、部署、开发策略等
  • 如果一个应用程序出现故障,其余应用程序仍然可以运行。
  • 每个 MFE 应用程序都较小,因此易于理解和更改。

单体应用程序架构与微前端应用程序架构

Introduction to Micro-frontend

单体应用程序:-单个应用程序中网络应用程序的所有功能。
微前端应用程序:-每个功能都由独立的 MFE 应用程序管理,即
MFE #1 负责 App-bar。
MFE #2 负责产品列表。
MFE #3 负责侧导航栏。
容器应用程序负责协调这些 MFE 应用程序。

MFE 应用程序如何相互集成

  1. 构建时集成(编译时集成)
  2. 运行时集成(客户端集成)
  3. 服务器端集成(SSR 集成)。

构建时集成(编译时集成)
在此集成中,容器应用程序可以访问所有 MFE 应用程序源代码,并且在加载到浏览器中之前构建/编译容器应用程序时会创建一个组合包。

优点

  • 设置和理解非常简单。
  • MFE 可以通过延迟加载来提高性能。

缺点

  • 每次在 MFE npm 包中进行任何更改时,都需要重建并重新部署容器应用程序。
  • 如果多个 MFE 将与容器应用程序紧密耦合,那么 MFE 应用程序就有可能成为分布式整体应用程序。
  • 简而言之,您的 MFE 与类似于 NPM 包的容器应用程序集成。

MFE 应用程序如何集成到构建时集成(此处以电子商务应用程序为例)

  1. 团队 #1,开发产品列表 MFE 应用程序。
  2. 团队 #1 部署 Products-List MFE 应用并将其发布为 NPM 包。
  3. 团队 #2,管理容器应用程序,包括 Products-List MFE 应用程序作为容器应用程序中的 NPM 包依赖项。
  4. 团队 #2,编译和构建容器应用程序包,该包包含容器应用程序的代码,包括 Products-List MFE 应用程序代码。
  5. 简而言之,您的 MFE 与类似于 NPM 包的容器应用程序集成。
  6. 就是这样。

运行时集成(客户端集成)
在此集成中,一旦容器应用程序加载到浏览器中,它就可以使用 MFE 应用程序的 url 访问 MFE 应用程序。

优点

  • 每个 MFE 都可以部署,无需重新部署容器应用。
  • 可以使用同一个MFE应用程序的不同版本,容器可以决定使用哪个MFE版本以及何时使用,这使得测试和集成变得容易。
  • 每个 MFE 应用程序都可以有自己的工具和库用于开发目的。

缺点

  • 运行时 MFE 的设置和集成比构建时 MFE 更复杂。

MFE 应用程序如何集成到运行时集成(此处以电子商务应用程序为例)

  1. 团队 #1,开发产品列表 MFE 应用程序。
  2. 团队 #1 部署 Products-List MFE,即 https://mystore.in/productslist.js
  3. 团队#2,管理容器应用程序,将使用 webpack-module-federation 将其与容器应用程序集成。
  4. 当用户打开 https://mystore.in/ 时,容器应用程序将加载到浏览器中并获取 Products-List MFE 应用程序并将其显示在容器应用程序页面中定义的位置。
  5. 就是这样。

服务端集成(SSR 集成)

在此集成中,微前端应用程序的工作方式与 SSR 组件的工作方式类似。所有MFE应用程序都集成在服务器端,并且复合容器应用程序返回到浏览器。

优点

  • 应用加载速度更快。
  • SEO 友好的方法。

缺点

互动性有限。
发展挑战。

现在就这样,谢谢您的宝贵时间。

以上是微前端简介的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn