微前端的概念将微服务应用于前端开发。
这个想法是将应用程序或网站分解成更小的、独立开发的部分,然后在运行时连接,而不是将它们创建为一个单一的、有凝聚力的整体。
该方法使您能够使用其他技术并与独立团队一起创建应用程序的其他组件。
这个想法是通过以这种方式分割开发来减少与典型单体相关的维护费用。
通过允许他们作为一个连贯的团队专注于应用程序的特定领域,它还使后端和前端开发人员之间的新合作形式成为可能。
例如,您可能有一个团队专门负责搜索功能或对业务至关重要的关键产品的另一个方面。
多亏了模块联合,您有足够的功能来处理 微前端 接近任务。
这篇文章将深入探讨模块联合的架构,以及它的主要特性和应用模式。
那么,什么是 模块联合?
Javascript 的模块联合设计在许多应用程序中使用了重用的部分。
这是相当基本的行话,但我只是让它看起来很轻松。
正如我们都熟悉在 React 应用程序中共享组件一样,Module Federation 在实践中有效地实现了相同的目标,只是它动态地公开应用程序模块以供其他应用程序使用。
模块联合旨在通过根据需要将那些关键共享元素作为宏观或微观交付来克服分布式系统中的模块共享问题。
这是通过将它们从您的应用程序和构建工作流程中删除来完成的。
为什么是模块联合?
以下是模块联合可以轻松处理的一些因素:
- Externals 和 DLL(动态链接库)是我们偶尔用于在应用程序之间共享功能的全部。 所有这些都使得扩展代码共享极具挑战性。
- NPM 很慢。
- 当两个独立的程序共享关键代码时,它们必须是动态和灵活的。
为了让独立应用程序完全在自己的存储库中,单独部署,并作为自己独立的 SPA 运行,创建了模块联合。
模块联合核心组件
在深入探讨之前,简要讨论模块联合带来的一些新概念很重要。
- 主机:当页面加载时,最初初始化的构建或模块称为主机。 提供者可以被认为是主机。
- 远程:远程是使用主机的一部分的不同结构。 他们也被称为客户。
- 双向主机:一个 Webpack 构建,它既可以作为其他主机使用的远程,也可以作为使用远程的主机。
- 供应商联合:为主机或远程启用 npm 模块依赖项的声明式共享运行时共享,无论它们从何处加载。 通过这种方式解决了微前端的主要性能问题之一。
联合应用程序模式
常青设计系统
联合应用程序的最基本形式之一是“常绿远程”,它是一个共享远程,如“设计系统”或“组件库”,为所有用户独立分发和更新。
如果每个应用程序团队都不需要花时间进行修订,这可能有助于确保所有在线网站都遵循最新的企业标识。
为了设计和实施必要的限制和程序以保证安全、持续的更新,这对于企业在考虑联合应用程序架构时可能是一个有用的起点。
以下是一些独立部署的共享遥控器可能适合的用例:
- 设计系统
- 应用程序外壳
- 组件库
- 消费者
- 共享工具包
- 内部或外部使用的小部件的替代分发模型
多SPA模块共享
在不同的独立单页应用程序中重用已导出的功能,例如组件。 好处包括:
- 消费者收到自动更新
- 领域专业知识仍然在负责它的团队中。
- 简化部署过程,因为不需要单独的模块版本。
壳驱动的联邦
shell 驱动的联邦包括:
- 创建新产品版本时,产品团队不会等待 Checkout 团队完成他们的工作。
- 切换遥控器时,没有页面重新加载。
- 必要时,Shell 提供缓慢的远程加载和(顶级)路由。
- 通过供应商联盟可以实现跨远程路由,这可以重用经常使用的 npm 包。
- Shell 提供了延迟加载的遥控器重用的框架和其他常见依赖项。
多壳联合
类似于上面描述的 shell 驱动的联邦,但使用了不同的 shell。
它包含:
- 一些贝壳
- 白标
- 并非所有遥控器都需要 Shell B 或具有独立的实现。
模块联合核心功能
出色的网络性能
正常 NPM 模块组成的问题在于,随着依赖项数量的增加,应用程序的大小通常会增加。
为了避免在您的应用程序加载时加载包并仅在必要时加载它们,模块联合为您提供了延迟加载包的能力。
这可以防止在实际需要模块之前下载模块,从而提高站点速度。
有效发展
每个项目都可以单独生产和交付,并且可以由不同的团队执行,因为模块联合鼓励您将应用程序组织成离散的项目,以便您可以单独构建和部署它们(因此是并行的)。
自我修复和冗余的能力
共享依赖项允许模块联合在一个地方跟踪程序的所有依赖项。
这样,即使应用程序没有声明依赖或出现网络问题,它仍然知道自己需要什么,并且可以根据需要处理下载。
有效处理常见依赖项
此外,Module Federation 提供了卓越的依赖管理,有效地解决了供应商和第三方的要求,因此您的应用程序永远不会加载多个版本的库。
不必重新部署消费者,而是部署独立代码。
开发人员对拥有常青功能非常感兴趣。 一旦暴露的依赖功能发生了变化,就不再需要重新安装消费者了。
我必须承认,这本身就是一个非常强大的功能,需要仔细检查以防止出现意外结果。
运行时,从其他构建中导入代码。
在采用 NPM 包模型时,我们可能会考虑使用类似于 API 的模块联合的应用程序,而不是共享代码和考虑“库”。
就像它们也可以从其他应用程序接收功能一样,Web 应用程序现在可以将功能提供给其他应用程序。
增强开发人员体验,同时保留客户体验
不限 JavaScript 开发人员 使用 Module Federation 会很舒服,因为它是一个 Webpack 插件,从 Webpack 版本 5 开始就可以访问。
如果我们仔细考虑一下,这实际上是相当强大和有趣的。
通过使用第三方 Webpack 加载器,考虑所有组件 的WebPack 捆绑包,包括脚本、资产、样式、图片、降价等。
通过使用模块联合,所有这些都可以共享和联合。
微前端以单片方式运行。
向您的应用程序添加共享功能非常容易; 只需正常导入包或使用同步加载。
或者,异步加载可用于仅在必要时通过使用延迟加载来加载依赖项。
结论
在这篇文章中,我们讨论了模块联合作为开发微前端应用程序的绝佳选择。
让应用程序在运行时交换和使用功能通过使各个团队能够处理独立的应用程序来鼓励可扩展性。
当通用功能发生变化时,您无需设计和部署您的消费者,因为它支持常绿功能。
您的程序在设置后将像单体一样运行,这太棒了。
可共享的依赖项用于减小应用程序的大小。 由于许多开发者已经熟悉 Webpack 环境,因此开发者体验非常好。
发表评论