了解React的微前端

前端开发面临着许多挑战。简化开发流程并加速任务执行是每个开发团队的目标。在开发庞大复杂产品时，让团队成员协作完成任务是非常困难的。幸运的是，微前端 为这些挑战提供了解决方案。

微前端意味着将前端单体应用拆分为几个更小、更易管理的部分。这种开发架构至关重要，因为它可以提高开发人员在前端代码上的效率和效果。本文将探讨使用React的微前端是什么，以及它们的好处、缺点、实现选项和微前端 架构。我们还将提供示例，以帮助您在实际层面上理解所有内容。

什么是微前端？

微前端是一种最近的开发模式，其中Web应用程序的UI是由自治组件组装而成。

这些组件可以由不同团队使用不同技术构建。微前端的架构类似于后端，后端使用半独立的微服务构建。

多年来，微前端在开发领域逐渐受到欢迎和接受。与后端的微服务类似，每个应用程序（在微前端中）都是独立存在的，具有明确定义的功能或目标。

例如，典型的网站有主页、关于我们页面、服务页面、结账页面、支付页面等。根据微前端的概念，每个页面都可以作为一个单独的自治应用程序开发。

软件开发团队也可以分为专业团队。因此，一个开发团队可以负责编写主页，而另一个团队则编写服务页面，依此类推。

这种方法带来了许多优势。微前端架构旨在帮助工程师克服当前单页应用前端开发的挑战 。

通过这种最新和流行的前端开发方法，开发人员可以简化任务、鼓励协作、提高流程的效率和效果，并显著提高生产力。

微前端的简要历史

2011年，微服务在一次软件架构师举办的活动中被解释。当时，这是许多公司正在尝试的一种开发风格。随着时间的推移，微服务的好处在后端开发架构中取得了成功。

为了发展，Thought Works在2016年11月提出了“微前端”这个术语，这是一种类似于微服务的前端架构。因此，公司开始尝试能够使用新架构创建前端的框架。

2017年11月，Thought Works推荐了Single-Spa用于微前端实现。接下来，在2019年，Martin Fowler撰写了一篇名为“微前端”的热门文章，宣传了微前端架构。2020年末，Zack Jackson发布了Module Federation，这是Webpack 5中包含的一个插件。

Module Federation彻底改变了微前端领域。组织现在已经采用了这个插件，将问题多多的单体应用程序转移到微前端。也就是说，微前端仍处于“初期阶段”，我们可以期待看到更多的革命性变化。

如何开发微前端？

在定义了微前端及其简要历史之后，让我们现在探讨不同的开发微前端的方式 。您可以使用以下三种方法构建微前端：

使用Module Federation
使用Web组件
使用IFrames

1. Module Federation

Module Federation是Webpack 5的一个插件，它使您能够开发不相互依赖的各种构建。因此，它们可以独立构建和启动。使用该插件，您可以快速创建多个功能，以组成一个单一产品。

Module Federation的有趣之处

一些功能使Module Federation值得考虑满足您的开发需求。以下是您应该使用它的原因：

解决依赖挑战： 该插件具有允许开发人员解决依赖问题的功能。
优秀的代码共享： 它为开发人员提供了更好的代码共享方式。开发人员可以为Webpack支持的任何应用程序公开任何代码。
不依赖环境： 您可以在不同平台上应用共享代码。它不依赖于任何环境，消除了与不兼容性相关的任何挑战。

Module Federation配置

该插件需要进行适当的配置才能正确使用。您需要了解配置的工作方式，以充分利用该软件。以下是您需要熟悉的主要配置选项：

Name： 这是暴露容器的唯一名称。您在初始化ContainerPlugin时输入的名称，被Module Federation使用，成为容器的相对路径。
Library： 库决定了暴露代码的存储和访问方式。库函数允许您进一步配置它，以确定名称和类型。
Filename： 这是输出包的文件名。此外，它还充当包的入口点。
Remote： 远程配置选项涉及静态远程模块的列表。本地模块可以访问这些远程模块。
Shared： 此配置选项使您能够共享您的节点库。此选项还配备了一系列配置函数，使您能够确定如何共享库。

还有其他Webpack配置函数需要了解，包括Output、Experiments和Optimization。对这些配置选项的良好理解对于能够正确开发具有Module Federation的微前端是必要的。

2. Web组件

Web组件是低级浏览器应用程序编程接口，使开发人员能够使用新组件扩展浏览器。此外，Web组件提供了一个标准接口，用于定义或确定新组件。

这个工具对于当代的Web设计和开发非常有用，开发人员利用组件来容纳用户界面功能。使用Web组件，您可以开发利用其他前端框架使用的HTML和DOM API的组件。

这种实现很有趣，因为您可以在不失去互操作性的情况下享受开发自己组件的灵活性。一旦您构建了一个Web组件，您可以将其应用于各种应用程序，因为Web组件在Web功能的任何地方都是有效的。

Web组件的三个主要概念

有三个Web组件概念您需要理解：

1. 自定义元素： 这些是JS API，使您能够构建自定义HTML元素。在开发自己的HTML元素时，您可以准确地控制它们的行为。

2. Shadow DOM： 这是仅对您的组件可用的私有DOM。影子DOM能够隔离JS和CSS。

3. HTML模板： 这些是您可以使用来为组件构建模板的HTML标记。

3. IFrames

IFrames允许您实现微前端。基本上，IFrames是可以嵌入到另一个HTML文档中的HTML文档。IFrames受到欢迎，因为它们使得可以从独立的子页面开发主页面变得容易。在样式和全局变量不相互影响的情况下，IFrames提供了合理的隔离水平。

尽管它们总体上很棒，但IFrames也有一些缺点。IFrames是旧技术，因此不提供最佳的开发人员和用户体验。与它们一起工作涉及一些困难，这会影响您页面的响应性。尽管如此，IFrames可以用于开发微前端。

IFrames的主要优势在于它们能够在微前端之间提供独立性和良好的隔离水平。这使您能够充分利用微前端架构的优势。另一方面，它们使得难以将微前端相互集成。此外，IFrames缺乏灵活性，难以链接和路由。

微前端的好处和权衡

微前端是一种新的前端架构，解决了传统单体前端架构带来的一些主要问题。在本节中，我们将探讨微前端的优势和劣势。

微前端的优势

1. 增量升级： 向旧的大型单体前端应用程序添加新功能可能既繁琐又困难。通过将应用程序拆分为不同部分，微前端使您的团队可以通过独立升级和交付新功能来快速升级。与其将前端架构视为单一应用程序，可以分别处理应用程序的不同部分，并单独交付新功能。

这种方法使团队能够对依赖关系、用户体验、加载速度、架构等进行增量升级 。开发团队可以将精力集中在产品的特定部分上。这为深思熟虑的决策和新技术的高质量实施创造了平台，而不是必须处理一个庞大而繁琐的前端应用程序。

2. 简化代码库： 开发人员面临的挑战之一是复杂的代码库。处理复杂的代码库是一项独立的工作，因为您需要特别小心以避免混淆。通过微前端，您可以将事情分解为不同的、更小的代码库，从而提供了您编写具有最佳清晰度的简单性。

默认情况下，每个前端应用程序的代码都会比单体代码小。因此，它更容易处理。除了提供一个无杂乱的代码库外，组件之间还建立了适当的边界。因此，开发人员不太可能在修复错误或更改代码时感到困惑或沮丧。

3. 独立部署： 微前端实现了独立部署。由于存在多个独立构建的前端应用程序，您可以单独部署每个应用程序。无论代码存储在何处或托管在何处，每个微前端都应该有一个开发流水线，使您能够构建、测试和部署。

独立部署的能力使您能够更快地发布功能。例如，在处理单体前端应用程序时，您必须等到完成更改后才能部署。采用微前端方法，产品的一个独立部分不会阻止您部署已准备好的部分。

4. 自主团队： 微前端的模块化允许专注于产品的特定部分。如果您有一个庞大的团队，您可以通过将团队分成较小的单元来提高效率和效率。每个开发组将负责处理产品的特定部分，从而提高了专注度，并使工程师能够以最大效率构建特定功能。

除了鼓励专业化和提高所发布代码的质量外，团队管理和协作也得到了改善。此外，当团队较小时，更容易知道谁在做什么。

团队负责人还会发现任务分配和监控变得更容易，与较大的团队相比。总的来说，自主的小团队创造了一个促进协作和技能转移的舒适空间。

5. 技术不可知： 微前端允许您将每个应用程序作为一个模块进行维护，并将其与其他应用程序分开。因此，您可以使用不同的技术、框架或库来开发每个应用程序。多样化的开发技术或框架的能力使您能够使用最佳的工具构建强大的产品。每个产品的每个部分都是不同的，所需的工具也是如此。与被固定在一组框架上不同，微前端使您能够自由地探索与每个模块相关的开发工具，而不受限制。

使用React的微前端的权衡

1. 下载大小更大： 重复的依赖被认为是微前端导致更大下载大小的原因。鉴于每个应用都是用React构建的，并且每当访问者想要加载页面时都必须下载依赖，因此会导致更大的下载大小。

例如，微前端React的工作方式如下：当用户从一个页面转到另一个页面时，他们必须多次（多次）下载React - 因为每个微前端都有React的副本。这一主要的架构概念可能会显著影响加载时间，影响用户体验和转化率。

然而，个别页面在初始快速加载速度时仍然可以更快地加载。也就是说，随后的导航将会更慢，因为用户必须在从一个页面转到另一个页面时重新加载相同的依赖项。

2. 环境差异： 如果开发容器与生产容器不同，那将是灾难性的。微前端架构使开发人员能够创建独立的前端应用程序，而不受其他开发团队构建的微前端的限制。这种分散的方法使开发更快速、更容易。

然而，在与生产环境不同的环境中进行开发会带来严重的问题。如果开发时容器与生产容器不同，部署到生产环境后，微前端将会出现故障或行为不同。这个问题的一个关键敏感部分是全局样式，它可能是容器或其他微前端的一部分。

解决这个问题的过程很简单。在本地构建时，如果环境与生产环境不同，建议定期集成和部署微前端到类似生产的环境中。

此外，应定期进行适当的测试，以确保及时发现并修复集成问题。这将大大减少这种潜在的权衡。您需要评估每个打算使用微前端执行的项目的集成挑战风险。

3. 管理复杂性： 微前端的分散方法通常会导致一系列难以管理的小团队和资源。微前端会增加需要处理的事物。根据项目的规模，将会有更多的存储库、工具、开发流水线、服务器、域名等。

鉴于上述情况，建议在采用之前考虑处理分散的开发架构所带来的责任。您需要有足够的自动化能力来提供和应对资源的激增。

在管理开发过程时，使用微前端意味着关于工具和编码最佳实践的决策将更加分散，并且不会受到中央管理的控制。采用微前端需要用户对重要决策过程的控制权较少感到舒适。

4. 合规问题： 在许多独立的前端代码库之间保持一致性可能会很困难。要确保质量、一致性和治理在所有团队中得到维护，需要出色的领导力。如果代码审查和定期监督没有得到适当执行，合规问题就会出现。

如何使用React构建微前端？

现在我们已经介绍了什么是微前端，它的工作原理、开发方法、优缺点，现在是时候学习如何使用React构建微前端了。

步骤1： 创建三个模块：主机、布局和页面。

步骤2： 从布局组件开始。

步骤3： 创建一些页面。

步骤4： 将所有内容放在主机模块中。

步骤5： 运行这三个应用程序，并在浏览器中尝试每一个。

为了举例说明，我们将使用一个食谱网站。“点击烹饪”听起来很酷，对吗？

在教授如何构建微前端的过程中，我们将利用Webpack的模块联邦，并借助create-mf-app来加快速度。

涉及的步骤（我们假设用户使用Linux/MacOS）

步骤1： 创建三个模块：主机、布局和页面。

创建项目的目录并进入。
1. Mkdir micro-frontend-example && cd micro-frontend-example。
创建一个主机模块。

步骤2： 从布局组件开始（这些组件通常在所有页面上共享）。注意：我们将使用Tailwind为组件添加一些样式。

创建一个页眉组件。代码：
创建一个页脚组件。代码：
在webpack.config.js文件中公开这两个组件。

步骤3： 现在，让我们创建一些页面！

我们需要一些路由，所以让我们从所有模块上安装react路由开始。
1. npm install react-router-dom。
接下来，让我们在JS/JSON文件中添加一些固定的食谱。
现在，创建一个列出所有食谱的页面。
创建一个显示单个食谱详情的页面。
在webpack配置文件中公开这两个组件。