2020 非常火的 11 个微前端框架

作者 | Jonathan Saring

译者 | Flora

https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20

微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。本文中，作者收集了 11 个最杰出的微前端构建工具，并提供了进一步学习的链接和视频。

将单体后端分解成为微服务之后，后端开发流程已在效率和规模上取得了显著进步。然而，当今大多数前端应用程序架构仍然是单体式的，使得前端开发流程很难加速和扩展。

微前端的想法是将前端单体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面及应用程序。

微前端有很多方法，从智能的构建时组件集成，到使用自定义路由的运行时集成等等。在本文的列表中，作者收集了最杰出的微前端构建工具。欢迎读者在评论中添加反馈或建议！

1. Bit

Bit 容许你从独立的组件组建和管理前端。它可能是清单上最受欢迎的、可用于生产（production-ready）的解决方案。

如果查看 bit.dev 主页，你会发现它由很多独立的组件构成。这些组件由不同团队，在不同代码库中构建，并最终集成在一起，创造了一个紧密结合的产品。

Bit CLI 是广泛流行的工具，用于组件驱动开发。使用 Bit，你可以将独立的组件构建、集成和组合到一起。

尽管人们通常将微前端视为在运行时发生的组合，但 Bit 可以让开发人员在构建时高效地组合前端，以享受两全其美的优势：“传统单体式前端”的安全性和健壮性，以及微前端的 简单性 和 可伸缩性。

使用 Bit，在与其他团队合作同时，不同的团队可以独立构建、发布和公开其组件，这样就可以将 Web 开发过程转变为功能和组件的模块化组合。

除了 用于组件驱动开发的 OSS 工具 外，Bit 还为团队提供了一个 云平台，该云平台使得团队可以构建变更并在组件上进行协作，可以高效地管理和扩展开发过程，同时保持所有团队完全独立，团队可自主交付。

为了确保每个前端都有自己独立且快速的构建流程，Bit 还提供了独特的 CI/CD 流程，该流程为 100% 组件驱动，这意味着不同的团队可以安全地集成更改，而不必等待，争夺主控权或打破任何东西。开发人员可以在所有受影响的应用程序中持续和安全地将更改传播到组件。

作为结果，通过 简单的解耦代码库、自治团队、小型定义良好的 API、独立的发布管道 和 持续增量升级，增强了工作流程。可以查看如下示例。

《我们怎样构建微前端》 https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc

如果你的团队使用组件来开发软件，并且正在寻找一种可以在大型应用程序上解锁微前端和模块化工作的解决方案，请务必查看 Bit 的 OSS 工具和平台，这可能正是你所需要的。

项目链接

https://github.com/teambit/bit

2. Webpack 5和Module Federation

多个单独的构建最后要形成一个应用程序。这些单独的构建不应相互依赖，因此可以单独开发和部署。

Module Federation 是 Zack Jackson 发明的 JavaScript 架构，Zack Jackson 随后提出为其创建一个 Webpack 插件。Webpack 团队提供帮助将该插件引入了 Webpack 5，目前处于 beta 测试阶段。

项目链接

https://webpack.js.org/concepts/module-federation/

简而言之，Module Federation 允许 JavaScript 应用程序在运行时从另一个应用程序动态导入代码。模块将构建唯一的 JavaScript 入口文件，其他应用程序可以通过设置 Webpack 配置项来下载该入口文件。

它还通过启用依赖关系共享来解决代码依赖关系和包大小增加的问题。例如，如果你要下载一个 React 组件，那么你的应用程序不会两次导入 React 代码。模块将自动使用你已有的 React 源，仅额外导入组件代码。最后，你可以使用 React.lazy 和 React.suspense 提供后备功能，以确保当导入的代码由于某种原因失败后，不会因构建失败而影响用户体验。

这个架构释放了构建微前端的巨大潜力。你可以在如下文章中阅读更多信息和查看示例。

采用 Webpack 5、Module Federation 和 Bit 变革微前端： https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0

3. Single SPA

Single SPA 将自己定义为一种“前端微服务 Javascript 框架”。简言之，它将生命周期应用于每个应用程序。每个应用程序都可以响应 url 路由事件，并且知道如何从 DOM 引导，加载和卸载自身。传统 SPA 和 Single SPA 应用程序之间的主要区别在于它们能够与其他应用程序共存，并且它们各自没有自己的 HTML 页面。

因此，如果你希望将不同的前端或框架整合到一个 DOM 中，并希望在运行时进行集成，请查看这个有趣的实验。

https://youtu.be/L4jqow7NTVg

你可以在这里查看一些示例：

https://github.com/react-microfrontends

项目链接

https://github.com/single-spa/single-spa

4. SystemJS

SystemJS 不是微前端框架，但它确实为跨浏览器的独立模块管理提供了解决方案。这种解决方案是实现 MF 的关键（并且实际上也被 Singe-spa 使用）。

可以将 SystemJS 视为 JS 模块的协调器。它使我们无需依赖本机浏览器支持，即可使用与 JS 模块相关的不同功能，诸如动态导入和导入映射等，并且所有这些都具有接近本机的性能。一些值得注意的功能包括用于较旧浏览器的 Polyfill，使用名称的模块导入（通过将名称映射到路径）以及对多个 JS 模块的单个网络请求（通过使用其 API 将多个模块设置为单个文件）。

它还提供便捷的方式访问其“模块注册表”，以便你随时了解浏览器中哪些模块是可用的。

项目链接

https://github.com/systemjs/systemjs

5. Piral

Piral 的目标是让你可以使用微前端轻松构建门户应用程序。你可以使用 Piral 创建模块化前端应用程序，并利用微前端体系结构在运行时使用称为 pilets 的解耦模块进行扩展。用户可以独立开发一个 pilet，并附带必要的代码以及所有其他相关资产。这是一个现场演示：

https://youtu.be/SkKvpBHy_5I

Piral 所要求的前提条件相当宽松，开发人员仅需要安装喜欢的编辑器、终端、网络浏览器和 Node.js 即可。开发者可以在本地开发机的仿真器中执行和调试 Piral instance（应用程序外壳）和 piltes（功能模块）。

项目链接

https://github.com/smapiot/piral

6. OpenComponent

Open Component（简称 OC）项目宣布其目标是“前端世界中的无服务器”。更具体地说，OC 旨在成为一个一站式微前端框架，从而使其成为一个丰富而复杂的系统，其中包括从组件处理到注册表、再到模板、甚至包括 CLI 工具。OpenComponents 有两个部分：

• components 是同构代码的小单元，主要由 html、javascript、css 组成。它们可以选择包含一些逻辑，从而允许服务端的 node.js 应用去组建用于呈现视图的模型。在渲染之后，它们就是纯 html 片段，可以插入到任何 html 页面中。
• consumers 是网站或微型网站（所有小型可独立部署的网站，这些网站均通过前门服务或路由机制连接）。这些网站需要在其网页中呈现部分内容的组件。请查看这里以了解更多信息：
  • https://github.com/opencomponents/oc

7. Qiankun

Qiankun 声称自己是“一个 微前端 实现，基于 single-spa，但已使 single-spa 可用于生产（production-ready）”。该项目旨在解决由较小的子应用程序组成较大的应用程序时所面临的一些主要问题，例如发布静态资源、集成单个子应用程序、确保子应用程序在开发和部署过程中彼此独立且运行时相互隔离、处理公共依赖性和处理性能问题等。

项目链接

https://github.com/umijs/qiankun

8. Liugi

Luigi 是一个微前端 JavaScript 框架，你可以使用它创建由本地和分布式视图驱动的管理用户界面。Luigi 允许 Web 应用程序与应用程序包含的微前端进行通信。为了确保通信顺利进行，你可以配置路由、导航、授权和 UX 元素等设置。

Luigi 由 Luigi Core 应用程序和 Luigi 客户端库组成。他们使用 postMessage API 在核心应用程序和微前端之间建立安全的通信。想获取更多信息，请自行前往查看。

这是一个 测试乐园 (Test Playground)，你可以在这里亲身体验它的工作原理。

https://fiddle.luigi-project.io/#/home/overview

尝试一下，也可在 GitHub 上查看这个不错的 SAP 项目：

项目链接

https://github.com/SAP/luigi

9.FrintJS

FrintJS 是“用于构建可伸缩和响应式应用程序的模块化 JavaScript 框架”。你可以使用它加载来自不同 bundlers 的应用程序，为应用程序提供结构，并处理诸如路由、依赖关系等问题。该项目可通过附加的软件包支持 RN 和 Vue，但文档和测试大多数是针对 React 的。

可以访问如下的 GitHub 项目了解更多信息。

项目链接

https://github.com/frintjs/frint

10 Mosaic

Mosaic 是一组服务，库以及规范定义了其组件之间如何彼此交互，用来支持大型网站的微服务式架构。Mosaic 使用了片段（Fragments）的机制，这些片段由单独的服务程序提供服务，并根据模板定义在运行时组合在一起。

它由一堆软件包组成，这些软件包处理不同的问题，例如路由、布局、模板存储、甚至展示 UI。需要更多信息，请查看如下链接。

项目链接

https://www.mosaic9.org/

11. PuzzleJS

PuzzleJS 是“用于可扩展和快速建站的微前端框架”。你可以使用它创建相互对话的网关和店面项目。它的灵感来自 Facebook 的 BigPipe，朝着微前端的方向发展。

PuzzleJs 提供诸如创建网关或店面（彼此独立）的功能，并提供配置文件将它们连接。你可以使用它在编译时将 html 模板编译为 javascript 函数。此操作完全独立于请求，因此 PuzzleJ 可以使用此功能发送第一个块。它也是 SEO 友好的，在服务端进行准备和渲染。而且，当片段所需的 api 出现故障时，PuzzleJs 可保证其他页面片段仍正常工作。这里是一个真实的 例子。

项目链接

https://github.com/puzzle-js/puzzle-js