張浩洋，顧丹鵬

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

0 引言

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

1 相關(guān)概念

1.1 巨石應(yīng)用

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

1.2 微前端的概念

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

圖1 微前端的交付方式

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

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

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

1.3 Vite簡(jiǎn)介

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

1.4 Jenkins簡(jiǎn)介

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

1.5 Rancher簡(jiǎn)介

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

2 項(xiàng)目介紹

2.1 項(xiàng)目描述

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

2.2 項(xiàng)目特點(diǎn)

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

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

3 項(xiàng)目實(shí)踐

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

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

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

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

3.2 開(kāi)發(fā)方式

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

3.3 部署方式

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

3.4 實(shí)踐成果

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

4 結(jié)語(yǔ)

本文重點(diǎn)介紹了基于無(wú)界微前端的一種開(kāi)發(fā)大型前端系統(tǒng)項(xiàng)目的解決方案，并在數(shù)據(jù)管理平臺(tái)項(xiàng)目實(shí)踐，著重闡述了對(duì)于大型系統(tǒng)如何通過(guò)微前端架構(gòu)共享通用模塊的設(shè)計(jì)思路。基于以上論述可見(jiàn)，使用微前端架構(gòu)可以解決一些大型系統(tǒng)的開(kāi)發(fā)問(wèn)題，極大提升開(kāi)發(fā)效率，為其他大型系統(tǒng)開(kāi)發(fā)提供了重要的經(jīng)驗(yàn)。最后，微前端架構(gòu)的應(yīng)用不但解決了巨石應(yīng)用問(wèn)題，而且為未來(lái)發(fā)展考慮。