一、什么是微前端

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。微前端不是单纯的前端框架或者工具，而是一套架构体系。

任何新技术的产生都是为了解决现有场景和需求下的技术痛点，微前端也不例外：

  1. 拆分和细化：当下前端领域，单页面应用（SPA）是非常流行的项目形态之一，而随着时间的推移以及应用功能的丰富，单页应用变得不再单一而是越来越庞大也越来越难以维护，往往是改一处而动全身，由此带来的发版成本也越来越高。微前端的意义就是将这些庞大应用进行拆分，并随之解耦，每个部分可以单独进行维护和部署，提升效率。
  2. 整合历史系统：在不少的业务中，或多或少会存在一些历史项目，这些项目大多以采用老框架（Backbone.js，Angular.js ）的B端管理系统为主，介于日常运营，这些系统需要结合到新框架中来使用还不能抛弃，对此我们也没有理由浪费时间和精力重写旧的逻辑。而微前端可以将这些系统进行整合，在基本不修改来逻辑的同时来同时兼容新老两套系统并行运行。

可以看到虽然在日常使用之，微前端架构来经常被使用来解决单体应用过于庞大的问题，但实际上它也可以用于将不同团队使用不同技术栈在不同时期所开发的前端项目合并为一个整体展示给用户并统一维护。因此，微前端给我们的前端开发工作提供了一个自行掌控项目规模、自由拆分合并项目的工具，让我们不必再盲目跟随项目需求的多少、新旧而划分我们的代码管理粒度。

二、微前端的实现

微前端的思想可能是在2016年后才被完整的总结并提出，但是其实现方式却早在web诞生之初就已经存在了，比如最经典的iframe等。发展至今，依靠着不断涌现的新技术，微前端的实现可以说是百家争鸣，百花齐放。

不过一般而言，我们微前端架构的应用可以被简单划分为如下几个部分。

未命名文件

其中，浏览器与子应用不直接交互，取而代之，中间部分的项目基座负责监听或侦测浏览器的指令，通过基座的能力来协调相应子应用的加载并将其展渲染在浏览器中指定的位置上。

2.1 集成方式

在微前端实现中，最最重要的就是如何集成相关的子应用，大体上整个集成方式分为两类：

1.构建时集成

在这种方式下，子应用作为组件被打包并发布，而基座应用通过安装子应用来实现集成（就和安装普通的NPM包类似）。这种方式存在很多问题，例如如何维护不同应用的版本，如何在不同应用中使用不同的技术，如何缩减最终应用的大小等等。而且，每个子应用的微小改变都会导致基座应用需要重新部署。

2.运行时集成

运行时集成可以进一步分为以下3种方式：

2.1 服务器侧集成

在这种集成方式中，加载哪个子应用的能力被放在了服务端完成。服务器根据请求的URL来决定以何子应用回复相关请求。最典型的就是使用Nginx路由转发实现微前端。

2.2 CDN边缘节点侧集成

这种方式充分利用了CDN和Lamda方法的能力，子应用的集成发生在CDN之中。

2.3 客户端集成

在这种方式中，各子应用都独立进行构建部署，而基座项目则可以根据需要在浏览器端加载不同的子应用。在这种集成方式中，子应用和基座几乎可以完全解耦，不同应用可以基于完全不同的技术栈进行开发。

2.2 关注点

为了在后续的技术选型中能够更为清晰的比较相关框架的异同，我们列举出以下几个尤为重要的方面，后续的框架对比可以着重关注在这些方面的对比上：

1.子应用集成/加载方式

a. 基座如何监听或侦测浏览器变化；

b. 基座如何控制各子应用的加载渲染；

2.子应用隔离

a. 不同子应用中JS代码的运行应该完全独立，互不影响；

b. 不同子应用中的CSS样式应该完全独立，互不影响；

3.应用间通讯

a. 子应用与基座之间如何传递数据；

b. 子应用之间如何传递数据；

三、框架罗列

初步认为可行的（基本都是运行时集成）：

  1. SYSTEMJS（并非完整解决方案，对import-map的补充）、single-spa、qiankun（路由分发）
  2. PIRAL（可在服务器或客户端集成，主要针对React,提供大量API，看起来不错）
  3. micro-app（Web Components）
  4. Module Federation（依赖webpack5）、Multi Module Framework (Shopee自研 文档链接 视频链接)
  5. LUIGI

框架趋势对比：https://npmtrends.com/@luigi-project/core-vs-@micro-zoe/micro-app-vs-piral-vs-qiankun

其它可参考的：

  1. Bit(构建时集成，组件集市？技术栈统一？)
  2. OPEN COMPONENTS（可在服务器或客户端集成，依赖云服务AWS S3 bucket或Google Storage，是否可替换？）
  3. MOSAIC 9（一整套工具包的集合，全栈微服务）
  4. PuzzleJs
  5. FRINTJS（4年前最后一次更新）