微前端架构在数据管理平台的实践与应用

张浩洋，顾丹鹏

（1. 中国电建集团华东勘测设计研究院有限公司，杭州 311100；2. 浙江华东工程数字技术有限公司，杭州 311100）

0 引言

将传统的Web 单体应用按功能拆分为一系列可被独立设计、开发、部署和运维的软件服务单元就是后端微服务［1］。这种由多个独立应用组成的架构风格也需要在前端工程上实现，于是出现了微前端架构的概念。微前端架构开发的Web 应用系统，用户使用起来仍然是一个独立的产品，而用户在系统上使用的微应用是无缝衔接的。对于前端开发者而言，使用微前端架构需要面临技术栈选型、独立开发和独立部署的问题，本文将针对使用微前端架构开发面临的问题，通过理论与实践，阐述一种大型Web应用系统使用微前端架构开发的解决方案。

1 相关概念

1.1 巨石应用

现代前端系统大都采用单页面应用开发，而单页面应用随着时间的推移和开发的功能增多，前端工程因变得庞大导致难以维护，通常把这种现象的应用称为巨石应用［2］。

1.2 微前端的概念

微前端不是单纯的前端框架或者工具，而是一套架构体系［3］。类似于微服务架构，将前端应用分解成一些更小、更简单的，能够独立开发、测试和部署的小块，然后将可独立交付的应用程序组合成一个更大的整体，在用户看来仍然是内聚的单个系统。微前端的优势包括增量升级、代码解耦和独立部署，所以微前端有独立的交付通道，如图1所示。

图1 微前端的交付方式

现如今微前端的架构方案有许多种，例如iframe、single-spa 和无界微前端等方案。各微前端架构方案优劣比较见表1。

表1 微前端架构方案比较

通过比较得出，无界微前端支持路由保持，有丰富的通信机制，支持全局弹窗，特别是支持Vite 等ESM 脚本运行，是目前为止非常不错的微前端架构。

1.3 Vite简介

Vite 是一种新型前端构建工具，显著提升前端开发体验。Vite 主要由两部分组成：①一个开发服务器，基于原生ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新；②一套构建指令，它使用Rollup 打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

1.4 Jenkins简介

Jenkins 是一个开源的工具，提供了一种容易使用的持续集成的系统。Jenkins 包括应用程序的自动编译、分发、测试和部署等，可以使开发者从复杂的系统集成中解脱出来［4］。

1.5 Rancher简介

Rancher 是一款开源的企业级容器管理平台，企业使用Rancher 后，可不必使用一系列开源软件去从头搭建容器服务平台。其中，Rancher 提供了在各个环境中使用管理Docker 和Kubernetes 的全栈化容器部署和管理工具，满足企业IT需求并为DevOps团队提供支持［5］。

2 项目介绍

2.1 项目描述

随着全球经济一体化的迅猛发展，信息战日益激烈，数据资产的优劣及价值挖掘已成为企业竞争的重要砝码，数据管理平台软件开发项目是我司为建立各工程行业BIM 模型及工程数据标准，梳理设计、建管、运维三大平台的主数据及关系，实现工程全过程数据贯通，并在此基础上不断围绕工程进行数据的集成、复用、沉淀，从而创造数据价值和业务价值的应用。数据管理平台软件开发项目的目标是围绕工程数据管理标准体系，实现工程数据全生命周期的信息化管理。

2.2 项目特点

数据管理平台软件开发项目包括主数据管理平台、BIM 模型属性校验系统、编码管理系统、数据集市平台、AI 云平台等一系列软件，各个应用软件通过租户的方式使用同一套后端服务，如图2所示。其中主要的业务功能是独立分开的，但是一些个人中心、登录、首页等模块是通用一致的，实际上，每开发一个新的软件，都需要将旧代码复制到新项目中，导致当需要维护个人中心的功能时，需要同时修改所有的软件代码来进行更新，提高了维护成本，增加了回归测试部署的时间。为了解决该问题，本团队决定采用微前端架构设计方案，将个人中心、登录、首页等共用模块拆分成微前端子应用，各个软件共用同一个子应用，实现应用共享，减少维护成本。

图2 原前端架构

3 项目实践

本文以个人中心、首页等共享模块作为子应用，使用共享模块的软件作为主应用，面对项目特点，重点从主子应用设计、开发方式、部署方式、实践成果描述微前端的应用实践。

3.1 主子应用设计

在子应用方面，旧代码是基于Vue-cli 的vue2 编写的，由于微前端的特性，可以对旧代码一块一块地进行分解，并采用新的技术重写，所以个人中心微前端子应用采用新的框架技术vite 来重写旧代码。另外子应用拥有独立的git仓库，脱离旧代码，拥有较小的源代码。对于各个主应用，在旧代码中删除个人中心模块，使用无界微前端的组件将新的个人中心模块的内容由URL 方式接入，实现主应用的设计，如图3所示。在主子应用通信方面，采用无界微前端的Eventbus 做全局通信，使用props 做局部通信。主子应用的设计，对于主应用而言，减少了代码总量，改动量较小；对于子应用而言，可以采用新的技术，获得新的开发体验。

图3 微前端架构主子应用设计

3.2 开发方式

主子应用在拆分后，由于分成了两个应用，需要同时启动服务，主应用中通过本地URL 接入子应用进行调试，也可直接使用线上部署的URL 接入子应用，避免启动本地服务。启用多个本地服务时会造成内存压力，可以通过增加内存容量来解决。

3.3 部署方式

首先主应用无需做任何修改，子应用使用jenkins 编译，将编译后的静态文件打包镜像，使用rancher 将主子应用部署在同一个命名空间下，共享服务配置，并使用服务发现的功能，利用nginx 将主子应用部署在一个域名和端口下，解决跨域问题。

3.4 实践成果

本次微前端改造之后，该项目系统代码权限管控更加严格，支持技术体系迭代升级。当数据管理平台软件开发项目的个人中心等共用模块需要修改时，仅需修改个人中心微前端即可，而不需要修改主应用的代码，极大地提高了开发效率。后续，还需要在基础库的代码复用、子系统配置等方面进行研究。

4 结语

本文重点介绍了基于无界微前端的一种开发大型前端系统项目的解决方案，并在数据管理平台项目实践，着重阐述了对于大型系统如何通过微前端架构共享通用模块的设计思路。基于以上论述可见，使用微前端架构可以解决一些大型系统的开发问题，极大提升开发效率，为其他大型系统开发提供了重要的经验。最后，微前端架构的应用不但解决了巨石应用问题，而且为未来发展考虑。