微前端架構在數據管理平臺的實踐與應用

張浩洋，顧丹鵬

（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 結語

本文重點介紹了基于無界微前端的一種開發大型前端系統項目的解決方案，并在數據管理平臺項目實踐，著重闡述了對于大型系統如何通過微前端架構共享通用模塊的設計思路。基于以上論述可見，使用微前端架構可以解決一些大型系統的開發問題，極大提升開發效率，為其他大型系統開發提供了重要的經驗。最后，微前端架構的應用不但解決了巨石應用問題，而且為未來發展考慮。