创建微前端的 5 种方法
Posted: Sat Feb 22, 2025 6:57 am
网络方法、服务器端组合、客户端组合、客户端渲染和构建时集成。
微前端的采用采用了不同的方法，多年来提供了多种实现方式。因此，让我们回顾一下使用微前端构建应用程序的不同方法。
1. 网络方法
这是创建微前端最简单的方法之一。您所要做的就是创建一组网页， 澳大利亚电报数据 独立部署它们，并将它们链接在一起，以便在单个应用程序中访问它们。
通过这种方法，用户可以使用指向提供内容的不同服务器的链接从一个网站转到另一个网站。
现在，这种方法有其优点和缺点。
它的一些好处包括：
这是构建微前端最简单的方法。它需要更少的时间，使开始更快。
它的学习曲线非常低，因此团队可以快速采用这种方法。
这些页面彼此完全隔离，因为它们独立部署在不同的服务器上。
但这种方法的最大缺点之一是它增加了整体基础设施。这意味着您必须投入更多精力来管理所有服务器并维护不同的开发。
2. 构建时集成
这种方法旨在允许您创建在构建时相互集成的微前端。通过这种方法，您可以在单独的环境中进行构建，但在构建期间，所有内容都会组装成一个应用程序。
您可以创建单独的 React、Vue.js 和 Angular 组件，并在构建时将它们集成以创建提供内容的单个应用程序。
这带来很多好处：
它的学习曲线较短，因为团队不需要学习他们不熟悉的框架。
您在独立的环境中工作。 CI/CD 可以帮助您自动在组件树中传播更改。
然而，这种方法的一个主要缺点是您失去了设计一致性，因为您在框架中使用的设计库可能无法提供相同级别的支持。
3. 服务器组成
从 Web 方法开始之后，对该方法进行了更改，并为微前端创建了更“服务器端”的方法。通过这种方法，您不再需要将两个页面链接在一起，而是根据 UI 交互从不同的服务器返回复合视图。
现在，这种方法唯一复杂的领域是它的反向代理层。您需要考虑缓存规则和跟踪之类的事情。您可以使用简单的代理定义实现这种方法，如下所示：
用户界面可能在某些时候开始变得不一致，同时也增加了应用程序维护的复杂性。然而，尽管存在这个缺点，它仍然提供了页面之间良好的隔离感，使您能够继续以微前端的方式工作。此外，与 Web 方法相比，服务器端方法使您的网站看起来是集成的（所有页面都在一个整体中），这可以改善应用程序的整体用户体验。
4. 客户端组成
回到服务器组合，您真的认为我们需要反向代理吗？这难道不会增加复杂性吗？
如果您这样想，您可以简单地使用“客户端组合”方法以最简单的形式创建微前端。您所需要的只是一个 iframe，同时使用postMessage 方法在微前端之间进行通信。
实施过程类似如下：
使用“客户端组合”有其优点和缺点。
它的一些好处包括：
这使您可以根据需要预加载、加载和渲染应用程序的各个部分，而不是一次性全部加载，从而提高应用程序的性能。
您的微前端彼此完全隔离。
然而，最大的缺点之一是您可能需要 JavaScript 环境才能实现此功能。
5. 客户端渲染
对于客户端渲染，您将需要应用程序中的一个框架。所有内置微前端都必须使用此框架才能正确构建。
虽然“客户端组合”看起来像是在寻找 Javascript 的替代框架，但最大的区别在于服务器端渲染是断开的。相反，数据被交换，然后转换成视图。
根据框架，数据可能会决定所呈现片段的位置、时间和交互性。通过这种模式实现高度的交互性不是问题。
微前端的采用采用了不同的方法，多年来提供了多种实现方式。因此，让我们回顾一下使用微前端构建应用程序的不同方法。
1. 网络方法
这是创建微前端最简单的方法之一。您所要做的就是创建一组网页， 澳大利亚电报数据 独立部署它们，并将它们链接在一起，以便在单个应用程序中访问它们。
通过这种方法，用户可以使用指向提供内容的不同服务器的链接从一个网站转到另一个网站。
现在，这种方法有其优点和缺点。
它的一些好处包括：
这是构建微前端最简单的方法。它需要更少的时间，使开始更快。
它的学习曲线非常低，因此团队可以快速采用这种方法。
这些页面彼此完全隔离，因为它们独立部署在不同的服务器上。
但这种方法的最大缺点之一是它增加了整体基础设施。这意味着您必须投入更多精力来管理所有服务器并维护不同的开发。
2. 构建时集成
这种方法旨在允许您创建在构建时相互集成的微前端。通过这种方法，您可以在单独的环境中进行构建，但在构建期间，所有内容都会组装成一个应用程序。
您可以创建单独的 React、Vue.js 和 Angular 组件，并在构建时将它们集成以创建提供内容的单个应用程序。
这带来很多好处：
它的学习曲线较短，因为团队不需要学习他们不熟悉的框架。
您在独立的环境中工作。 CI/CD 可以帮助您自动在组件树中传播更改。
然而，这种方法的一个主要缺点是您失去了设计一致性，因为您在框架中使用的设计库可能无法提供相同级别的支持。
3. 服务器组成
从 Web 方法开始之后，对该方法进行了更改，并为微前端创建了更“服务器端”的方法。通过这种方法，您不再需要将两个页面链接在一起，而是根据 UI 交互从不同的服务器返回复合视图。
现在，这种方法唯一复杂的领域是它的反向代理层。您需要考虑缓存规则和跟踪之类的事情。您可以使用简单的代理定义实现这种方法，如下所示：
用户界面可能在某些时候开始变得不一致，同时也增加了应用程序维护的复杂性。然而，尽管存在这个缺点，它仍然提供了页面之间良好的隔离感，使您能够继续以微前端的方式工作。此外，与 Web 方法相比，服务器端方法使您的网站看起来是集成的（所有页面都在一个整体中），这可以改善应用程序的整体用户体验。
4. 客户端组成
回到服务器组合，您真的认为我们需要反向代理吗？这难道不会增加复杂性吗？
如果您这样想，您可以简单地使用“客户端组合”方法以最简单的形式创建微前端。您所需要的只是一个 iframe，同时使用postMessage 方法在微前端之间进行通信。
实施过程类似如下：
使用“客户端组合”有其优点和缺点。
它的一些好处包括：
这使您可以根据需要预加载、加载和渲染应用程序的各个部分，而不是一次性全部加载，从而提高应用程序的性能。
您的微前端彼此完全隔离。
然而，最大的缺点之一是您可能需要 JavaScript 环境才能实现此功能。
5. 客户端渲染
对于客户端渲染，您将需要应用程序中的一个框架。所有内置微前端都必须使用此框架才能正确构建。
虽然“客户端组合”看起来像是在寻找 Javascript 的替代框架，但最大的区别在于服务器端渲染是断开的。相反，数据被交换，然后转换成视图。
根据框架，数据可能会决定所呈现片段的位置、时间和交互性。通过这种模式实现高度的交互性不是问题。