張浩洋，顧丹鵬

（1. 中國電建集團華東勘測設(shè)計研究院有限公司，杭州 311100；2. 浙江華東工程數(shù)字技術(shù)有限公司，杭州 311100）

0 引言

將傳統(tǒng)的Web 單體應(yīng)用按功能拆分為一系列可被獨立設(shè)計、開發(fā)、部署和運維的軟件服務(wù)單元就是后端微服務(wù)［1］。這種由多個獨立應(yīng)用組成的架構(gòu)風(fēng)格也需要在前端工程上實現(xiàn)，于是出現(xiàn)了微前端架構(gòu)的概念。微前端架構(gòu)開發(fā)的Web 應(yīng)用系統(tǒng)，用戶使用起來仍然是一個獨立的產(chǎn)品，而用戶在系統(tǒng)上使用的微應(yīng)用是無縫銜接的。對于前端開發(fā)者而言，使用微前端架構(gòu)需要面臨技術(shù)棧選型、獨立開發(fā)和獨立部署的問題，本文將針對使用微前端架構(gòu)開發(fā)面臨的問題，通過理論與實踐，闡述一種大型Web應(yīng)用系統(tǒng)使用微前端架構(gòu)開發(fā)的解決方案。

1 相關(guān)概念

1.1 巨石應(yīng)用

現(xiàn)代前端系統(tǒng)大都采用單頁面應(yīng)用開發(fā)，而單頁面應(yīng)用隨著時間的推移和開發(fā)的功能增多，前端工程因變得龐大導(dǎo)致難以維護(hù)，通常把這種現(xiàn)象的應(yīng)用稱為巨石應(yīng)用［2］。

1.2 微前端的概念

微前端不是單純的前端框架或者工具，而是一套架構(gòu)體系［3］。類似于微服務(wù)架構(gòu)，將前端應(yīng)用分解成一些更小、更簡單的，能夠獨立開發(fā)、測試和部署的小塊，然后將可獨立交付的應(yīng)用程序組合成一個更大的整體，在用戶看來仍然是內(nèi)聚的單個系統(tǒng)。微前端的優(yōu)勢包括增量升級、代碼解耦和獨立部署，所以微前端有獨立的交付通道，如圖1所示。

圖1 微前端的交付方式

現(xiàn)如今微前端的架構(gòu)方案有許多種，例如iframe、single-spa 和無界微前端等方案。各微前端架構(gòu)方案優(yōu)劣比較見表1。

表1 微前端架構(gòu)方案比較

通過比較得出，無界微前端支持路由保持，有豐富的通信機制，支持全局彈窗，特別是支持Vite 等ESM 腳本運行，是目前為止非常不錯的微前端架構(gòu)。

1.3 Vite簡介

Vite 是一種新型前端構(gòu)建工具，顯著提升前端開發(fā)體驗。Vite 主要由兩部分組成：①一個開發(fā)服務(wù)器，基于原生ES 模塊提供了豐富的內(nèi)建功能，如速度快到驚人的模塊熱更新；②一套構(gòu)建指令，它使用Rollup 打包代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。

1.4 Jenkins簡介

Jenkins 是一個開源的工具，提供了一種容易使用的持續(xù)集成的系統(tǒng)。Jenkins 包括應(yīng)用程序的自動編譯、分發(fā)、測試和部署等，可以使開發(fā)者從復(fù)雜的系統(tǒng)集成中解脫出來［4］。

1.5 Rancher簡介

Rancher 是一款開源的企業(yè)級容器管理平臺，企業(yè)使用Rancher 后，可不必使用一系列開源軟件去從頭搭建容器服務(wù)平臺。其中，Rancher 提供了在各個環(huán)境中使用管理Docker 和Kubernetes 的全?；萜鞑渴鸷凸芾砉ぞ?，滿足企業(yè)IT需求并為DevOps團隊提供支持［5］。

2 項目介紹

2.1 項目描述

隨著全球經(jīng)濟一體化的迅猛發(fā)展，信息戰(zhàn)日益激烈，數(shù)據(jù)資產(chǎn)的優(yōu)劣及價值挖掘已成為企業(yè)競爭的重要砝碼，數(shù)據(jù)管理平臺軟件開發(fā)項目是我司為建立各工程行業(yè)BIM 模型及工程數(shù)據(jù)標(biāo)準(zhǔn)，梳理設(shè)計、建管、運維三大平臺的主數(shù)據(jù)及關(guān)系，實現(xiàn)工程全過程數(shù)據(jù)貫通，并在此基礎(chǔ)上不斷圍繞工程進(jìn)行數(shù)據(jù)的集成、復(fù)用、沉淀，從而創(chuàng)造數(shù)據(jù)價值和業(yè)務(wù)價值的應(yīng)用。數(shù)據(jù)管理平臺軟件開發(fā)項目的目標(biāo)是圍繞工程數(shù)據(jù)管理標(biāo)準(zhǔn)體系，實現(xiàn)工程數(shù)據(jù)全生命周期的信息化管理。

2.2 項目特點

數(shù)據(jù)管理平臺軟件開發(fā)項目包括主數(shù)據(jù)管理平臺、BIM 模型屬性校驗系統(tǒng)、編碼管理系統(tǒng)、數(shù)據(jù)集市平臺、AI 云平臺等一系列軟件，各個應(yīng)用軟件通過租戶的方式使用同一套后端服務(wù)，如圖2所示。其中主要的業(yè)務(wù)功能是獨立分開的，但是一些個人中心、登錄、首頁等模塊是通用一致的，實際上，每開發(fā)一個新的軟件，都需要將舊代碼復(fù)制到新項目中，導(dǎo)致當(dāng)需要維護(hù)個人中心的功能時，需要同時修改所有的軟件代碼來進(jìn)行更新，提高了維護(hù)成本，增加了回歸測試部署的時間。為了解決該問題，本團隊決定采用微前端架構(gòu)設(shè)計方案，將個人中心、登錄、首頁等共用模塊拆分成微前端子應(yīng)用，各個軟件共用同一個子應(yīng)用，實現(xiàn)應(yīng)用共享，減少維護(hù)成本。

圖2 原前端架構(gòu)

3 項目實踐

本文以個人中心、首頁等共享模塊作為子應(yīng)用，使用共享模塊的軟件作為主應(yīng)用，面對項目特點，重點從主子應(yīng)用設(shè)計、開發(fā)方式、部署方式、實踐成果描述微前端的應(yīng)用實踐。

3.1 主子應(yīng)用設(shè)計

在子應(yīng)用方面，舊代碼是基于Vue-cli 的vue2 編寫的，由于微前端的特性，可以對舊代碼一塊一塊地進(jìn)行分解，并采用新的技術(shù)重寫，所以個人中心微前端子應(yīng)用采用新的框架技術(shù)vite 來重寫舊代碼。另外子應(yīng)用擁有獨立的git倉庫，脫離舊代碼，擁有較小的源代碼。對于各個主應(yīng)用，在舊代碼中刪除個人中心模塊，使用無界微前端的組件將新的個人中心模塊的內(nèi)容由URL 方式接入，實現(xiàn)主應(yīng)用的設(shè)計，如圖3所示。在主子應(yīng)用通信方面，采用無界微前端的Eventbus 做全局通信，使用props 做局部通信。主子應(yīng)用的設(shè)計，對于主應(yīng)用而言，減少了代碼總量，改動量較??；對于子應(yīng)用而言，可以采用新的技術(shù)，獲得新的開發(fā)體驗。

圖3 微前端架構(gòu)主子應(yīng)用設(shè)計

3.2 開發(fā)方式

主子應(yīng)用在拆分后，由于分成了兩個應(yīng)用，需要同時啟動服務(wù)，主應(yīng)用中通過本地URL 接入子應(yīng)用進(jìn)行調(diào)試，也可直接使用線上部署的URL 接入子應(yīng)用，避免啟動本地服務(wù)。啟用多個本地服務(wù)時會造成內(nèi)存壓力，可以通過增加內(nèi)存容量來解決。

3.3 部署方式

首先主應(yīng)用無需做任何修改，子應(yīng)用使用jenkins 編譯，將編譯后的靜態(tài)文件打包鏡像，使用rancher 將主子應(yīng)用部署在同一個命名空間下，共享服務(wù)配置，并使用服務(wù)發(fā)現(xiàn)的功能，利用nginx 將主子應(yīng)用部署在一個域名和端口下，解決跨域問題。

3.4 實踐成果

本次微前端改造之后，該項目系統(tǒng)代碼權(quán)限管控更加嚴(yán)格，支持技術(shù)體系迭代升級。當(dāng)數(shù)據(jù)管理平臺軟件開發(fā)項目的個人中心等共用模塊需要修改時，僅需修改個人中心微前端即可，而不需要修改主應(yīng)用的代碼，極大地提高了開發(fā)效率。后續(xù)，還需要在基礎(chǔ)庫的代碼復(fù)用、子系統(tǒng)配置等方面進(jìn)行研究。

4 結(jié)語

本文重點介紹了基于無界微前端的一種開發(fā)大型前端系統(tǒng)項目的解決方案，并在數(shù)據(jù)管理平臺項目實踐，著重闡述了對于大型系統(tǒng)如何通過微前端架構(gòu)共享通用模塊的設(shè)計思路?；谝陨险撌隹梢?，使用微前端架構(gòu)可以解決一些大型系統(tǒng)的開發(fā)問題，極大提升開發(fā)效率，為其他大型系統(tǒng)開發(fā)提供了重要的經(jīng)驗。最后，微前端架構(gòu)的應(yīng)用不但解決了巨石應(yīng)用問題，而且為未來發(fā)展考慮。