微前端简介

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

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

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

为什么选择微前端？

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

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

单体应用程序：-单个应用程序中网络应用程序的所有功能。
微前端应用程序：-每个功能都由独立的 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中文网其他相关文章！