3.5 微前端架构

3.5.1 微前端的定义

微前端这个术语最初来自ThoughtWorks。与微服务的产生背景一致，也出现了大型且杂乱无章的前端单体应用（monolith），难以维护和发展，解决方案是微前端架构。微前端是指多个按页面和功能划分的前端技术团队，使用不同的技术体系，将遗留的和新建的各种应用页面聚合展现给用户，每个子应用可以独立开发、测试和部署。见https://www.thoughtworks.com/radar/techniques/micro-frontends。

3.5.2 微前端的作用

■ 人员和技术独立演进：不同的团队，独立的技术体系，分别构建，各自演进。解决了巨大的前端单体应用开发效率低下、构建速度慢的问题。

■ 聚合新旧各种前端应用：聚合不同业务和技术体系的前端应用，尤其是解决遗留系统问题，新模块可以使用最新的框架和技术，保留旧系统继续发挥作用。

3.5.3 技术发展路线

在前后端未分离的时代，实现类似微前端作用的技术是Portal与Portlet，典型的实现如Liferay。Portal是一种Web应用，用来将不同信息源的内容集成到一个Web页面里，提供个性化的内容和个性化的风格展示。页面上每个不同的信息源就是一个Portlet。Portlet是一个服务端实现的架构，按JSR168规范实现异构独立开发，每个Portlet对接不同的信息源并将返回内容在Portal页面中显示，Portal Web页面由一个个Portlet组成。移动互联网时代，Portlet技术无法适应前后端分离的要求，所以出现了微前端技术。

3.5.4 微前端的特点

一个完善的微前端应具备如下特点：

■ 子应用技术无关。技术框架无关，各子应用可以使用不同种类的框架，不同种类的框架共存，如AngularJS、React.js和Vue框架并存。框架版本无关，同一种框架的不同版本可以共存，不会出现死锁崩溃。

■ 子应用工程自治。子应用在开发、发布及部署上相互独立，不存在依赖关系。

■ 子应用运行时隔离。子应用运行时样式隔离，避免CSS相互污染；运行时DOM隔离，避免变量冲突，JS操作非自身领域的对象；运行时异常隔离，避免问题互相传递、互相影响。

■ 子应用动态组合。子应用可以自由组合，对用户提供统一的样式与用户体验。子应用遵循标准规范的生命周期；子应用通过路由映射和数据共享互相访问并实现父子嵌套关系。

3.5.5 微前端的技术架构

典型的微前端架构如图3-9所示。微前端架构应包括如下几部分。

（1）构建打包：支持微前端插拔式打包，微前端的插拔不需要对整体重新打包发布。

（2）生命周期：将微前端注册到主体，运行时按需加载和卸载。

（3）运行沙箱：提供微前端的运行环境并隔离DOM操作和CSS样式。

（4）路由分发：导航到各个微前端，路由前保证微前端预加载。

（5）消息总线：各组成部分通过消息总线分发事件、共享数据。

（6）观察监控：观察运行时状态，监控健康指标、告警和阈值。

微前端技术方兴未艾，满足微前端的全部特点要求充满了挑战，目前典型解决方案是single-spa。