微前端架构

微前端架构

过去一年，前端领域最引人注目的发展之一就是微前端（MFD）。尽管这个概念尚处于起步阶段，但它正在获得越来越多的支持，并有可能彻底改变游戏规则。

微前端：它是什么？

MFD 背后的理念是将网站或 Web 应用视为由独立团队拥有的功能组合。每个团队都专注于特定业务或任务领域，并且是该领域的专家。团队是跨职能的，会从数据库到用户界面，端到端地开发其功能。因此，MFD 就是将一个单体应用程序拆分成多个较小的应用程序。使用 MFE 的意愿主要与组织规模和开发人员数量有关。

借助称为 MFD 的架构设计模式，前端可以由较小的、松散连接的应用程序构建，然后再组合成一个整体。

实现 MFE：一些常用方法

1. 构建时集成
在构建时集成中，每个 MFE 都是独立开发的，然后在构建过程中进行集成。这通常是通过将各个 MFE 的编译资源（例如 JavaScript、CSS 等）组合成一个 bundle 包并提供给客户端来实现的。

优点：

• 由于集成发生在构建期间，因此简化了部署过程。
• 由于集成工作已经完成，因此降低了客户端的复杂性。

2. 运行时集成

在运行时集成中，MFE 在运行时独立加载。这意味着每个 MFE 负责加载自身并在必要时与其他 MFES 交互。

优点：

• 允许动态加载组件，从而可能减少初始页面加载时间。
• 在组件的加载方式和时间方面提供了更大的灵活性。

运行时集成有三种类型的组合：

1. 服务器端组合
2. 边缘构图
3. 客户端组合

服务器端组合：
在这种方法中，服务器负责将各个 MFE 聚合成一个完整的页面。服务器获取所需的 MFE 组件，并将它们组合成一个 HTML 响应，然后发送给客户端。

优势

• 提供客户端和服务器之间关注点的明确分离。
• 降低客户端代码的复杂性。

边缘端组合
边缘端组合涉及使用内容分发网络 (CDN) 或边缘服务器来处理多页面文件 (MFD) 的聚合。边缘服务器拦截客户端的请求，获取必要的组件，并将它们组合成完整的页面，然后再将其传递给客户端。

优势

• 帮助卸载应用程序服务器的处理。
• 可以通过从更靠近客户端的位置提供内容来提高性能。

客户端组合：
在这种方法中，客户端浏览器负责获取并组合 MFE 组件以呈现完整的页面。这通常使用 JavaScript 框架或库来完成，这些框架或库负责处理组件的动态加载和渲染。

优势

• 提供更具互动性和动态性的用户体验。
• 允许组件的组合和交互方式更加灵活。