在微前端中,我们将一个整体应用程序划分为多个较小的应用程序。
每个应用程序负责整体应用程序的独特功能。
例如,
一个电子商务应用程序可以分为以下较小的独立微前端应用程序。
为什么选择微前端?
- 多个团队可以独立工作,专注于一个 MFE 应用。
- 代码复用性非常高。
- 每个团队可以自由选择自己的技术(React/Angular/Vue)、部署、开发策略等
- 如果一个应用程序出现故障,其余应用程序仍然可以运行。
- 每个 MFE 应用程序都较小,因此易于理解和更改。
单体应用程序架构与微前端应用程序架构
单体应用程序:-单个应用程序中网络应用程序的所有功能。
微前端应用程序:-每个功能都由独立的 MFE 应用程序管理,即
MFE #1 负责 App-bar。
MFE #2 负责产品列表。
MFE #3 负责侧导航栏。
容器应用程序负责协调这些 MFE 应用程序。
MFE 应用程序如何相互集成
- 构建时集成(编译时集成)
- 运行时集成(客户端集成)
- 服务器端集成(SSR 集成)。
构建时集成(编译时集成)
在此集成中,容器应用程序可以访问所有 MFE 应用程序源代码,并且在加载到浏览器中之前构建/编译容器应用程序时会创建一个组合包。
优点
- 设置和理解非常简单。
- MFE 可以通过延迟加载来提高性能。
缺点
- 每次在 MFE npm 包中进行任何更改时,都需要重建并重新部署容器应用程序。
- 如果多个 MFE 将与容器应用程序紧密耦合,那么 MFE 应用程序就有可能成为分布式整体应用程序。
- 简而言之,您的 MFE 与类似于 NPM 包的容器应用程序集成。
MFE 应用程序如何集成到构建时集成(此处以电子商务应用程序为例)
- 团队 #1,开发产品列表 MFE 应用程序。
- 团队 #1 部署 Products-List MFE 应用并将其发布为 NPM 包。
- 团队 #2,管理容器应用程序,包括 Products-List MFE 应用程序作为容器应用程序中的 NPM 包依赖项。
- 团队 #2,编译和构建容器应用程序包,该包包含容器应用程序的代码,包括 Products-List MFE 应用程序代码。
- 简而言之,您的 MFE 与类似于 NPM 包的容器应用程序集成。
- 就是这样。
运行时集成(客户端集成)
在此集成中,一旦容器应用程序加载到浏览器中,它就可以使用 MFE 应用程序的 url 访问 MFE 应用程序。
优点
- 每个 MFE 都可以部署,无需重新部署容器应用。
- 可以使用同一个MFE应用程序的不同版本,容器可以决定使用哪个MFE版本以及何时使用,这使得测试和集成变得容易。
- 每个 MFE 应用程序都可以有自己的工具和库用于开发目的。
缺点
- 运行时 MFE 的设置和集成比构建时 MFE 更复杂。
MFE 应用程序如何集成到运行时集成(此处以电子商务应用程序为例)
- 团队 #1,开发产品列表 MFE 应用程序。
- 团队 #1 部署 Products-List MFE,即 https://mystore.in/productslist.js
- 团队#2,管理容器应用程序,将使用 webpack-module-federation 将其与容器应用程序集成。
- 当用户打开 https://mystore.in/ 时,容器应用程序将加载到浏览器中并获取 Products-List MFE 应用程序并将其显示在容器应用程序页面中定义的位置。
- 就是这样。
服务端集成(SSR 集成)
在此集成中,微前端应用程序的工作方式与 SSR 组件的工作方式类似。所有MFE应用程序都集成在服务器端,并且复合容器应用程序返回到浏览器。
优点
缺点
互动性有限。
发展挑战。
现在就这样,谢谢您的宝贵时间。
以上是微前端简介的详细内容。更多信息请关注PHP中文网其他相关文章!