微前端的原理及实现

一、简介

只听过“微服务”，“微前端”又是什么硬核技术？

它正是借鉴微服务的概念来应用在前端上，将一个巨大的前端工程拆分成一个的小工程，这些小工程具备独立的开发和运行能力，而整个系统就由这些小工程协同合作。

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git来管理。

可以跟微服务这么对比着去理解：

微服务	微前端
一个微服务就是由一组接口构成，接口地址一般是 URL。当微服务收到一个接口的请求时，会进行路由找到相应的逻辑，输出响应内容。	一个微前端则是由一组页面构成，页面地址也是 URL。当微前端收到一个页面 URL 的请求时，会进行路由找到相应的组件，渲染页面内容。
后端微服务会有一个网关，作为单一入口接收所有的客户端接口请求，根据接口 URL 与服务的匹配关系，路由到对应的服务。	微前端则会有一个加载器，作为单一入口接收所有页面 URL 的访问，根据页面 URL 与微前端的匹配关系，选择加载对应的微前端，由该微前端进行进行路由响应 URL。

二、 为什么需要微前端

在 toB 的前端开发工作中，我们往往就会遇到如下困境：

1. 工程越来越大，打包越来越慢
2. 团队人员多，产品功能复杂，代码冲突频繁、影响面大
3. 内心想做 SaaS 产品，但客户总是要做定制化

微前端的实现，意味着对前端应用的拆分。拆分应用的目的，并不只是为了架构上好看，还为了提升开发效率。

微前端带来这么一系列的好处：

1. 应用自治。只需要遵循统一的接口规范或者框架，以便于系统集成到一起，相互之间是不存在依赖关系的。
2. 单一职责。每个前端应用可以只关注于自己所需要完成的功能。
3. 技术栈无关。你可以使用 Angular 的同时，又可以使用 React 和 Vue。

除此，它也有一系列的缺点：

1. 应用的拆分基础依赖于基础设施的构建，一旦大量应用依赖于同一基础设施，那么维护变成了一个挑战。
2. 拆分的粒度越小，便意味着架构变得复杂、维护成本变高。
3. 技术栈一旦多样化，便意味着技术栈混乱。

三、如何设计微前端架构

就当前而言，要设计出一个微前端应用不是一件容易的事——还没有最佳实践。在不同的落地案例里，使用的都是不同的方案。出现这种情况的主要原因是，每个项目所面临的情况、所使用的技术都不尽相同。为此，我们需要了解一些基础的微前端模式。

1. 架构模式

微前端应用间的关系来看，分为两种：基座模式（管理式）、自组织式。分别也对应了两者不同的架构模式：

基座模式。通过一个主应用，来管理其它应用。设计难度小，方便实践，但是通用度低。
自组织模式。应用之间是平等的，不存在相互管理的模式。设计难度大，不方便实施，但是通用度高。

就当前而言，基座模式实施起来比较方便，方案上便也是蛮多的。

而不论种方式，都需要提供一个查找应用的机制，在微前端中称为服务的注册表模式。和微服务架构相似，不论是哪种微前端方式，也都需要有一个应用注册表的服务，它可以是一个固定值的配置文件，如 JSON 文件，又或者是一个可动态更新的配置，又或者是一种动态的服务。它主要做这么一些内容：

应用发现。让主应用可以寻找到其它应用。应用注册。即提供新的微前端应用，向应用注册表注册的功能。第三方应用注册。即让第三方应用，可以接入到系统中。访问权限等相关配置。

应用在部署的时候，便可以在注册表服务中注册。如果是基于注册表来管理应用，那么使用基座模式来开发比较方便。

2. 设计理念

在笔者实践微前端的过程中，发现了以下几点是我们在设计的过程中，需要关注的内容：

中心化：应用注册表。这个应用注册表拥有每个应用及对应的入口。在前端领域里，入口的直接表现形式可以是路由，又或者对应的应用映射。
标识化应用: 我们需要一个标识符来标识不同的应用，以便于在安装、卸载的时候，能寻找到指定的应用。一个简单的模式，就是通过康威定律来命名应用。应用生命周期管理。高内聚，低耦合。

3. 生命周期

前端微架构与后端微架构的最大不同之处，也在于此——生命周期。微前端应用作为一个客户端应用，每个应用都拥有自己的生命周期：

Load，决定加载哪个应用，并绑定生命周期
bootstrap，获取静态资源
Mount，安装应用，如创建 DOM 节点
Unload，删除应用的生命周期
Unmount，卸载应用，如删除 DOM 节点、取消事件绑定.

这部分的内容事实上，也就是微前端的一个难点所在，如何以合适的方式来加载应用——毕竟每个前端框架都各自不同，其所需要的加载方式也是不同的。当我们决定支持多个框架的时候，便需要在这一部分进入更细致的研究。
随后，我们要面临的一个挑战是：如何去拆分应用。

4. 技术方式

从技术实践上，微前端架构可以采用以下的几种方式进行：

1. 路由分发式。通过 HTTP 服务器的反向代理功能，来将请求路由到对应的应用上。
2. 前端微服务化。在不同的框架之上设计通讯、加载机制，以在一个页面内加载对应的应用。
3. 微应用。通过软件工程的方式，在部署构建环境中，组合多个独立应用成一个单体应用。
4. 微件化。开发一个新的构建系统，将部分业务功能构建成一个独立的 chunk 代码，使用时只需要远程加载即可。
5. 前端容器化。通过将 iFrame 作为容器，来容纳其它前端应用。
6. 应用组件化。借助于 Web Components 技术，来构建跨框架的前端应用。

实施的方式虽然多，但是都是依据场景而采用的。有些场景下，可能没有合适的方式；有些场景下，则可以同时使用多种方案。

https://alili.tech/archive/11...

https://qiankun.umijs.org/zh/...

https://baijiahao.baidu.com/s...

https://www.cnblogs.com/scdis...