你应该知道的11个微前端框架（微前端singlespa）

当你将长期存在的后端整体，细分为各种微服务时，就可以在后端的开发过程中获得更加有效也更具规模的新事物。然而，大多数前端应用程序如今仍然独立存在很难变得更加高效，与此同时，对于前端发展进程的规模化也具有同样的意义。

微前端就是要将前端整体细分为更小、更容易进行管控的片段。每个部分都可以端到端地拥有自己的功能，可以在自身的代码库中工作、独立发布版本、可以不断地进行小的增量升级，并且还可以通过API与其他部分进行集成，以便共同对页面和应用程序进行创作和管理。

有许多方法可以构建微前端，从组件的智能构建时集成，到使用自定义路由的运行时集成。在这篇文章中，我收集了许多杰出的工具，来帮助我们构建微前端。欢迎您在评论区发表建议提供或反馈！

1

Bit

Bit允许你从独立的组件进行构建并管理前端，它可能是最受欢迎的，并且可以立即投入生产的解决方案。

如果你查看bit.dev 主页，你就会发现，它是由很多独立的组件构成，这些组件由不同的团队，在不同的代码库中构建，并且最终集成在一起。

Bit CLI是用于组件驱动开发，并且广泛流行的工具。通过Bit，你可以一起构建、创立并集成独立的组件。

尽管微前端通常被认为是一个发生在运行时的组合，但是Bit也让开发者在构建时高效地组合前端，以享受两方面的优势：一方面是对于“传统整体”的安全性和健壮性，另一方面可以简化微前端，并且使其具有可扩展性。

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

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

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

结果就是，工作流通过简单的解耦代码库、自治团队、体积较小却定义良好的API，独立发布渠道， 并且持续地进行增量更新。

如果你的团队正在通过组件进行构建，并且正在寻找一种可以在大型应用程序上解锁微前端和模块化工作的解决方案，请一定要查看Bit的OSS工具和平台，它可能正是你需要的。

2

Webpack 5 和 Module Federation

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

Module Federation是由Zack Jackson建立的JavaScript架构，并在后来提出为其创建Webpack插件。Webpack团队帮助它将该插件引入了Webpack 5，目前处于测试阶段。

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

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

这个架构释放了构建微前端真正巨大的潜力。

3

Single SPA

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

4

Systemjs

Systemjs并不是微前端的框架，但是它提供了独立模块跨浏览器管理的解决方案。这种方案正是实施MF的关键（实际上也被用于Single SPA）。

Systemjs被看做JS模块的协调器，它能够让我们运用不同的JS模块连接的特点，例如动态导入、导入映射等等，而不是依赖于本地的浏览器支持——在以上方面，Systemjs都具有接近本地的性能。

一些值得注意的功能包括适用于老版本浏览器的Polyfill，使用名称的模块导入（通过将名称映射到路径），和对多个JS模块单个的网络请求（通过使用它的API，将多个模块设置为单个文件）。

Systemjs还可轻松访问“模块注册表”，能够让你随时了解到浏览器中的可用模块。

5

Piral

Piral的目标是让你轻松通过微前端建立一个门户应用，它能够确保你能够创建一个模块化的应用程序，并且利用微前端体系结构，在运行时使用被称为“pilets”的解耦模块进行扩展。“pilet”能够独立开发，并附带着必要的代码和其他相关资源。

这种前提条件非常不错，开发人员只需要安装使用你最喜欢的编辑器，终端，网络浏览器和Node.js即可。你可以在本地开发计算机上的仿真器中，执行和调试Piral instance（应用程序外壳）和pilet（功能模块）。

6

Open Components

Open Components宣布他们的目标是“让前端世界中无服务器”。更具体地说就是，Open Components的目标是成为一个一站式微前端框架，从而使其成为一个丰富而复杂的系统，其中包括从组件处理、注册表，到模板，甚至包括CLI工具在内的各种工具。

Open Components有两个部分：

第一，components是同构代码的小单元，主要由html，css，js组成。它们可以选择包含一些逻辑，从而允许服务器端的node.js应用程序组成一个用于呈现视图的模型。经过渲染后，它们是纯HTML片段，可以插入到任何html页面中。

第二，consumers是网站或微型网站（小型的可独立部署的小型网站，都通过前门服务或任何路由机制连接），它们需要将components用于在其网页中，以此呈现部分内容。

7

Qiankun

Qiankun宣称他们是“一个基于single-spa的微前端实现，但它已经可以投入生产了”，它的目标是解决一些，从小型子应用程序构建大型应用程序过程中，可能会面临的一些主要问题，比如发布静态资源，整合单个的子应用程序，确保子应用程序在开发和部署过程中彼此独立，运行时相互隔离，从而处理公共依赖性，处理各种性能问题等。

8

Luigi

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

Luigi由Luigi Core应用程序和Luigi 客户端库组成。他们使用postMessage API在核心应用程序和微前端之间建立安全的通信。

9

FrintJS

FrintJS是一个“用于构建可伸缩和响应式应用程序的模块化JavaScript框架”。你可以用它加载来自不同bundlers的应用程序，为应用程序提供结构，并处理诸如路由，依赖关系以及其他问题。FrintJS还可以通过其他程序包支持RN和Vue，但主要是对React进行记录和测试。

10

Mosaic 9

Mosaic 9是一组服务、库，以及一个定义了它组成部分之间如何进行交互的规范，以支持大型网站的微服务样式架构，由一些处理不同需求，比如路由、布局、模板存储、甚至展示UI的软件包组成。Mosaic运用的这些片段提供独立的服务，并且根据模板定义，在运行时将他们组合在一起。

11

PuzzleJS

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

PuzzleJS可以提供的功能包括创建一个网关，或者店面（彼此独立），同时也可以通过提供一个组态文件把它们连接起来。它使你可以在编译时将html模板编译为javascript函数。由于这种操作完全与请求相独立，因此PuzzleJ可以通过这种功能发送第一个组块。

它也是SEO友好的，已在服务器端进行了准备和渲染。而且，当片段所需的API出现故障时，PuzzleJs也保证其他页面片段仍然可以正常工作。