微前端详解

我之所以谈论这个话题，是因为我感觉微前端不再只是一个流行词，它正在大型 Web 应用程序中迅速普及。

微前端可能是前端开发领域的下一个重大发展方向。

让我来告诉你为什么！

什么是微前端？

微前端是一种用于前端代码的软件架构模式。它受到后端微服务架构模式的影响。

要了解微前端以及我们为什么需要它们，我们首先需要了解一些关于微服务的知识。

微服务架构——一种面向服务的架构（SOA）结构风格——将应用程序组织成一组松散耦合的服务。在微服务架构中，服务粒度细化，协议轻量级化。（维基百科）

举个例子——如果我们有一个基于微服务的Webshop后端，其中每个服务都由一个团队负责，那么我们可以有以下微服务：

• 产品
• 产品目录（管理）
• 报告
• 顾客
• 订单

注意：这是微服务架构的简化视图，在实际应用中，我们可能会有几十个甚至几百个微服务。

在前端领域，对于像这样的应用程序，我们可以这样做：

请注意以下几点：

• 每个微前端都可以使用不同的技术构建。
• 每个微前端都可以由一个团队负责。
• 每个微前端只能依赖于一个微服务。

为什么选择微前端？

这样做有什么好处呢？好处很多。

还记得你加入一个老项目的开发团队，发现前端还在用 XSLT 和 jQuery 构建吗？当时根本没考虑过重写，你只能使用这些老技术来添加新功能和修复 bug。

即使你能说服利益相关者重写代码，并且你拥有一个可以维持1-3年的新代码库，你又凭什么认为10年后它不会像今天的XSLT和jQuery一样被人们所接受呢？

微前端的优势：

• 更小、更易于维护的代码库
• 每个微前端都可以使用不同的技术编写——这最大限度地减少了对外部的依赖。
• 每个微前端都可以由不同的团队负责——减少跨团队依赖
• 我们可以根据需要随时更新/升级或删除微前端。

作为一家企业，我们必须做出承诺——我们将不断地用新的微服务/前端替换旧的微服务/前端。因此，我们将持续改进我们的代码库。

例如：
我们可以删除旧的 framewok.X.js微前端，并将其完全替换为用framewok.Y.js编写的新微前端。这降低了重写整个应用程序的风险。

不同的方法

构建微前端有多种不同的方法。

方案一：每个微服务一个微前端🤖

当微服务架构基于功能时，这种方案非常合适。我们可以创建一个功能微服务——例如用于结账的功能，然后我们再构建一个结账微前端。这样做的好处是，每个微前端只需要了解一个特定的后端 API。

选项 2 - Web 组件🌟

如今，很多 UI 框架都提供了对 Web 组件的支持（Svelte 在这方面做得相当不错）。

我们可以保留一个旧版用户界面，并不断地用新的 Web 组件替换旧代码。每个新的 Web 组件都可以是一个微前端，可以用 Svelte、Vue、原生 JavaScript 或任何你喜欢的工具编写。

每个 Web 组件的代码都可以托管在不同的服务器上，因此可以轻松地进行单独部署，而不会影响系统的其余部分。

方案三——使用微前端工具🛠️

您可以使用single-spa之类的工具来实现不同微前端的连接。

这种方法最适合构建新的微前端应用程序。如果您决定使用single-spa，请务必仔细阅读他们的文档并参考他们的建议。

选项 4 - 模块联合 ⚙️

这是 Webpack 5 的一项功能，它实现了：

多个独立的构建版本应该组成一个单一的应用程序。这些独立的构建版本之间不应该存在依赖关系，因此它们可以单独开发和部署。（webpack）

由于 Webpack 模块联邦看起来相当稳定，因此对于使用 Webpack 的项目来说，这无疑是最令人兴奋的选择。模块联邦允许模块共享，因此通过适当的配置可以避免重复加载相同版本的 React 或 Angular 等问题。

注意：您也可以组合使用这些选项来实现所需的架构。例如，您可以single-spa结合使用module federation。

我能负担得起微前端吗？

微前端当然不适用于所有应用场景。

微服务/前端/服务解决了软件重写和软件可扩展性的问题。独立部署对于微服务/前端/服务也至关重要。

它还依赖于公司拥有庞大的开发团队这一事实。在这种情况下，如果不是所有开发人员都在同一个代码库上工作，避免整天互相干扰，那就容易得多。相反，这些开发人员将被分成若干团队，每个团队负责几个甚至一个微组件/前端/服务。

微前端存在的问题

显然，任何事物都有其缺点，所以让我们来看看微前端的缺点是什么：

• 当存在许多微服务/前端/服务时，很难在本地测试整个代码库。
• 需要预先设计非常严格的接口。
• 更多代码库需要维护、升级和解决安全风险
• 最终用户需要为每个微前端下载应用程序代码，这会造成性能损失。
• 微前端之间的通信可能会变得非常复杂。
• 基础设施和部署也可能会变得更加复杂。

更多资源

结论

希望这篇文章能让您更清楚地了解微前端及其代表的含义，感谢您的阅读！