方燕瓊，唐升衛(wèi)，顧博川，代仕勇

（1.廣東電科院能源技術(shù)有限責(zé)任公司，廣州 510080； 2.廣東電網(wǎng)有限責(zé)任公司電力科學(xué)研究院，廣州 510080）

引言

作為智能電網(wǎng)的關(guān)鍵環(huán)節(jié)，智能配電網(wǎng)的建設(shè)愈發(fā)得到了重視。但配電網(wǎng)具有地域分布廣、電氣設(shè)備種類多和數(shù)量多、狀況復(fù)雜等特點(diǎn)[1-3]，導(dǎo)致配電網(wǎng)的信息更加多樣化。尤其隨著更多智能電氣設(shè)備接入配電網(wǎng)，配電網(wǎng)信息具有數(shù)據(jù)源復(fù)雜[4]、數(shù)據(jù)結(jié)構(gòu)多樣、數(shù)據(jù)量大等明顯的大數(shù)據(jù)特征[5,6]。

不僅配網(wǎng)設(shè)備在地域上分散分布，而且受技術(shù)所限，許多分包的配網(wǎng)業(yè)務(wù)在系統(tǒng)中也是割裂的。因此在當(dāng)前智能配電網(wǎng)建設(shè)過(guò)程中，多以單一功能模塊形成孤立的垂直系統(tǒng)為主，容易形成信息孤島，而構(gòu)建高性能的跨系統(tǒng)集成平臺(tái)，將有助于配電網(wǎng)信息的充分利用和共享。

1 配電網(wǎng)跨系統(tǒng)業(yè)務(wù)

隨著智能配電網(wǎng)信息系統(tǒng)的業(yè)務(wù)也在不斷地發(fā)展，業(yè)務(wù)功能逐漸的增多，信息系統(tǒng)的組織結(jié)構(gòu)、軟件架構(gòu)不斷地升級(jí)和變化[7,8]。智能配電網(wǎng)業(yè)務(wù)結(jié)構(gòu)如圖1所示。

圖1 智能配電網(wǎng)業(yè)務(wù)結(jié)構(gòu)

導(dǎo)致大型的單體項(xiàng)目面臨一些問(wèn)題，一方面，單一的系統(tǒng)已經(jīng)過(guò)于的龐大甚至臃腫，需要進(jìn)一步的根據(jù)不同的業(yè)務(wù)進(jìn)行細(xì)化；另一方面，市場(chǎng)上許多大型系統(tǒng)根據(jù)業(yè)務(wù)領(lǐng)域被拆分成許多子系統(tǒng)分包給不同的企業(yè)開(kāi)發(fā)。隨著不同的業(yè)務(wù)系統(tǒng)的拆分，技術(shù)棧也因而變得越來(lái)越難以統(tǒng)一，出現(xiàn)了多元化的情景。在走向多元化后，用戶需要切換不同的系統(tǒng)和賬號(hào)查看想要的結(jié)果，無(wú)疑就增加了用戶的操作。因此，為了將已經(jīng)拆分的業(yè)務(wù)整合成一個(gè)整體便于用戶獲取業(yè)務(wù)信息，現(xiàn)急需一個(gè)能夠接入各企業(yè)分包業(yè)務(wù)并聚合數(shù)據(jù)的系統(tǒng)平臺(tái)。

傳統(tǒng)前端代碼通常會(huì)根據(jù)單個(gè)系統(tǒng)劃分為一個(gè)項(xiàng)目，而項(xiàng)目的體積是與業(yè)務(wù)的復(fù)雜度是成正相關(guān)的，業(yè)務(wù)增多會(huì)逐漸導(dǎo)致項(xiàng)目的體積臃腫。為了適應(yīng)這個(gè)變化往往需要更多的開(kāi)發(fā)者、更細(xì)粒度的團(tuán)隊(duì)組織。在開(kāi)發(fā)過(guò)程中，各模塊解耦到各自完成，上線時(shí)糅合在一起運(yùn)行，其中產(chǎn)生出層出不窮的分支合并、代碼回滾，都會(huì)造成合作效率的驟降。從根源上看造成這種局面的是框架設(shè)計(jì)的問(wèn)題，因此需要對(duì)整個(gè)項(xiàng)目進(jìn)行解耦，使原本復(fù)雜的單體應(yīng)用拆分為多個(gè)相對(duì)獨(dú)立的應(yīng)用，使每個(gè)模塊都可以單獨(dú)部署上線，同時(shí)通過(guò)微服務(wù)的方式，動(dòng)態(tài)組合各個(gè)獨(dú)立的應(yīng)用。

為了克服現(xiàn)有技術(shù)之間的互通性和業(yè)務(wù)的拆分，形成科學(xué)有效的一體化技術(shù)架構(gòu)與應(yīng)用頂層設(shè)計(jì)[9],前端開(kāi)發(fā)出現(xiàn)了一種類似于微服務(wù)架構(gòu)的微前端的概念。即將單頁(yè)面前端應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)小型前端應(yīng)用集成一個(gè)系統(tǒng)，并且各個(gè)前端應(yīng)用都支持獨(dú)立開(kāi)發(fā)部署。

針對(duì)微前端架構(gòu)的解決方案，目前出現(xiàn)的架構(gòu)分為以下幾種方式：路由分發(fā)式、前端微服務(wù)化、微應(yīng)用[10,11]、微件化、前端容器化、應(yīng)用Web Components化。前端微服務(wù)化現(xiàn)有的實(shí)現(xiàn)方案還缺乏獨(dú)立部署的標(biāo)準(zhǔn)，無(wú)論是開(kāi)發(fā)還是打包部署，都需要對(duì)相關(guān)子應(yīng)用和基座重新修改和打包。

2 現(xiàn)有的前端微服務(wù)的實(shí)現(xiàn)方式及缺點(diǎn)

在當(dāng)前微服務(wù)中存在多種實(shí)現(xiàn)方式，其中主要是以下幾種方式：

1）使用 HTTP 服務(wù)器的路由來(lái)重定向多個(gè)應(yīng)用。通過(guò)路由分發(fā)式的微前端架構(gòu)應(yīng)該是采用最多、最易采用的 “微前端” 方案。但是這種方式看上去更像是多個(gè)前端應(yīng)用的聚合，即該方式只是將這些不同的前端應(yīng)用拼湊到一起，使其從表面上體現(xiàn)出來(lái)的是一個(gè)完整的整體。與其他的微服務(wù)相比，此技術(shù)在子應(yīng)用的切換會(huì)導(dǎo)致頁(yè)面刷新，非常影響用戶體驗(yàn)。

2）在不同的框架之上設(shè)計(jì)通訊、加載機(jī)制，諸如 Mooa 和 Single-Spa：本技術(shù)是基于Single-Spa上改進(jìn)的一種方式。比原生的更加方便靈活，以及新增了基于iFrame的方式來(lái)解決第三方框架沖突的問(wèn)題。在后端服務(wù)的通信中，通過(guò)rest接口等方式實(shí)現(xiàn)的方式不能移植到前端中，通過(guò)設(shè)計(jì)一種單獨(dú)的應(yīng)用間的通信方式，增加了數(shù)據(jù)交互性。

3）通過(guò)組合多個(gè)獨(dú)立應(yīng)用、組件來(lái)構(gòu)建一個(gè)單體應(yīng)用：組合式集成，即通過(guò)軟件工程的方式在構(gòu)建前、構(gòu)建時(shí)、構(gòu)建后等步驟中，對(duì)應(yīng)用進(jìn)行一步的拆分，并重新組合。這種方式似乎很理想，即在滿足多個(gè)團(tuán)隊(duì)并行開(kāi)發(fā)的同時(shí)，又能構(gòu)建出適合的交付物。然而它有一個(gè)嚴(yán)重的限制即必須使用同一個(gè)框架。鑒于業(yè)務(wù)是拆分后再重新組合的，這與單獨(dú)的微前端相比，部署更加繁瑣，因此重新組合時(shí)容易出錯(cuò)等問(wèn)題和限制性比較大。

4）iFrame技術(shù)。使用 iFrame 及自定義消息傳遞機(jī)制：iFrame可以創(chuàng)建一個(gè)全新的獨(dú)立的宿主環(huán)境，這表示前端應(yīng)用之間可以相互獨(dú)立運(yùn)行。然而，現(xiàn)最需要獲取的是用戶加載或卸載應(yīng)用的時(shí)機(jī)和環(huán)境；該過(guò)程所出現(xiàn)的難題是采取怎樣的動(dòng)畫過(guò)渡能夠讓用戶使用時(shí)更加自然，單純的iFrame恐難以做到。

從上述分析可知，當(dāng)前的微服務(wù)技術(shù)只側(cè)重于單個(gè)內(nèi)容，缺少綜合使用，導(dǎo)致微服務(wù)效果還沒(méi)充分發(fā)揮。

針對(duì)智能配電網(wǎng)日趨復(fù)雜的信息系統(tǒng)，亟需一種高效的處理方法，本論文將綜合使用上述的前端服務(wù)技術(shù)，優(yōu)化Single-Spa并且集成iFrame的技術(shù)，通過(guò)優(yōu)化wepack的打包方式分包加載資源。通過(guò)配置文件的方式簡(jiǎn)化了Single-Spa的初始化。通過(guò)新增iFrame的嵌入方式，創(chuàng)建全新隔離的宿主環(huán)境。通過(guò)自定義的應(yīng)用間的通信方式，加強(qiáng)與簡(jiǎn)化應(yīng)用間的通信。

3 新型的前端微服務(wù)

本文提供了一種基于前端微服務(wù)化的跨技術(shù)棧開(kāi)發(fā)系統(tǒng)的優(yōu)化，該前端微服務(wù)的內(nèi)容包括：對(duì)子項(xiàng)目應(yīng)用資源的打包配置優(yōu)化、設(shè)計(jì)路由的相應(yīng)機(jī)制，以及應(yīng)用間的通信方式。此技術(shù)可以整合不同的技術(shù)棧的應(yīng)用，減少應(yīng)用的資源大小以及控制應(yīng)用權(quán)限等功能。

3.1 整體思路

本文以一個(gè)實(shí)際的智能配電網(wǎng)應(yīng)用場(chǎng)景，研究了一個(gè)父項(xiàng)目為主框架，配以表示不同業(yè)務(wù)模塊的多個(gè)子應(yīng)用構(gòu)建的前端微服務(wù)解決方案。圖2描述了前端微服務(wù)的整體結(jié)構(gòu)，父項(xiàng)目在用戶登錄后通過(guò)獲取的用戶權(quán)限，將請(qǐng)求回來(lái)的菜單儲(chǔ)存在狀態(tài)管理器中，當(dāng)訪問(wèn)某一子應(yīng)用的路由時(shí)，首次會(huì)在子應(yīng)用中與路由表作比較，將路由信息動(dòng)態(tài)添加到該子應(yīng)用的路由表中，借此控制整個(gè)項(xiàng)目的路由，分發(fā)到各個(gè)子項(xiàng)目中，進(jìn)而對(duì)子應(yīng)用的權(quán)限進(jìn)行控制。

圖2 前端微服務(wù)整體結(jié)構(gòu)

業(yè)務(wù)的拆分可以解耦單一項(xiàng)目，但未經(jīng)優(yōu)化的項(xiàng)目打包方式還是會(huì)使項(xiàng)目加載變慢，優(yōu)化前端打包的方式是必不可少的方式；服務(wù)通過(guò)配置文件的方式實(shí)現(xiàn)，有利于子應(yīng)用動(dòng)態(tài)增刪改查，更深層次的話可以根據(jù)用戶的身份權(quán)限來(lái)注冊(cè)不同的應(yīng)用；解決應(yīng)用間的數(shù)據(jù)共享問(wèn)題一方面打通了應(yīng)用之間的關(guān)聯(lián)性，另一方面也減少了接口的請(qǐng)求，減少公共數(shù)據(jù)需要從后端獲?。徽蟟Frame方式的前端微服務(wù)的優(yōu)點(diǎn)在于可以創(chuàng)建獨(dú)立的宿主環(huán)境，防止代碼的污染。

3.2 具體實(shí)現(xiàn)

本新型前端微服務(wù)的具體實(shí)現(xiàn)方法如圖3所示， 該實(shí)現(xiàn)方法主要由子項(xiàng)目應(yīng)用資源的打包配置優(yōu)化、設(shè)計(jì)路由的相應(yīng)機(jī)制，以及應(yīng)用間的通信方式三個(gè)部分組成。

圖3 前端微服務(wù)實(shí)現(xiàn)方式

1）打包配置優(yōu)化

微前端原則上各個(gè)子應(yīng)用可兼容不同的前端框架，對(duì)于不同的前端框架的部署方式不一，本文采用基于vue開(kāi)發(fā)的子應(yīng)用打包優(yōu)化方案。首先修改項(xiàng)目的打包文件，分包加載模塊文件，接著將不同的插件包分包打包在不同的文件中，達(dá)到減少打包后的文件大小，據(jù)測(cè)試對(duì)比，打包后的文件大小可減小50 %。

將子應(yīng)用的配置單獨(dú)成文件，并且子應(yīng)用使用manifest自動(dòng)加載經(jīng)過(guò)hash值的文件，具體方法：讓子應(yīng)用使用 stats-webpack-plugin 插件，每次打包后都輸出一個(gè)只包含重要信息的manifest.json文件。父項(xiàng)目先ajax請(qǐng)求這個(gè)json文件，從中讀取出需要加載的js目錄，然后同步加載。

2）設(shè)計(jì)路由的相應(yīng)機(jī)制

微前端主架構(gòu)使用vue擴(kuò)展Single-Spa，并增加路由管理，增加支持iFrame模式的加載，使用router.addRoutes動(dòng)態(tài)添加相應(yīng)iFrame路由。主框架基于vue-cli的腳手架進(jìn)行集成，并使用element-ui作為前端庫(kù)，并引入路由router，Single-Spa，axios等相關(guān)插件。

當(dāng)開(kāi)發(fā)一個(gè)新的應(yīng)用時(shí)，需要在主應(yīng)用配置并更新相應(yīng)的子應(yīng)用。通過(guò)增加應(yīng)用配置文件，在文件中聲明相關(guān)應(yīng)用的名稱及對(duì)應(yīng)的地址和端口，可用于初始化Single-Spa的時(shí)候?qū)⑵渥?cè)到主框架中；具體實(shí)現(xiàn)是通過(guò)遍歷調(diào)用微服務(wù)框架的注冊(cè)函數(shù)registerApplication為項(xiàng)目注冊(cè)子應(yīng)用，并且自定義遠(yuǎn)程加載mainfest.json文件，解析需要加載的js文件，簡(jiǎn)化了注冊(cè)的過(guò)程。

3）應(yīng)用間的通信方式

為了解決應(yīng)用間的數(shù)據(jù)共享問(wèn)題，本文設(shè)計(jì)了一套應(yīng)用通信的機(jī)制。由于主框架中使用vue作為開(kāi)發(fā)環(huán)境，所以使用vuex作為統(tǒng)一的狀態(tài)管理器，并且使用事件收發(fā)器在主框架中定義全局函數(shù)，提供主框架與子應(yīng)用之間的數(shù)據(jù)通信，并修改狀態(tài)值。具體實(shí)現(xiàn)為APP1在調(diào)用事件收發(fā)器后修改主框架的狀態(tài)管理器的狀態(tài)值后，APP2亦可通過(guò)事件收發(fā)器獲取主框架內(nèi)的狀態(tài)值，實(shí)現(xiàn)多個(gè)子應(yīng)用間的數(shù)據(jù)通信與同步。

3.3 現(xiàn)場(chǎng)應(yīng)用

本文提出的前端微服務(wù)已經(jīng)應(yīng)用于翁源地區(qū)電網(wǎng)的配電網(wǎng)自動(dòng)化系統(tǒng)，通過(guò)供電可靠性分析、負(fù)荷預(yù)測(cè)、電壓質(zhì)量監(jiān)測(cè)、用戶重復(fù)停電統(tǒng)計(jì)、臺(tái)區(qū)重過(guò)載統(tǒng)計(jì)、配變檔位調(diào)節(jié)排行，可以對(duì)智慧臺(tái)區(qū)、光儲(chǔ)微網(wǎng)配網(wǎng)線路進(jìn)行全方位的監(jiān)測(cè)[12-15]，當(dāng)監(jiān)測(cè)到異常情況時(shí)，智能臺(tái)區(qū)可以自動(dòng)發(fā)出重過(guò)載預(yù)警和配變調(diào)節(jié)預(yù)警。前端微服務(wù)應(yīng)用如圖4所示。本前端微服務(wù)的應(yīng)用將極大提升智能臺(tái)區(qū)的運(yùn)行效果，為智能電網(wǎng)的信息化、數(shù)字化、智能化發(fā)展打下堅(jiān)實(shí)一步。

圖4 前端微服務(wù)應(yīng)用

4 結(jié)論

本文提出的適用于智能配電網(wǎng)前端微服務(wù)的跨系統(tǒng)集成平臺(tái)優(yōu)化方案，通過(guò)對(duì)整個(gè)項(xiàng)目進(jìn)行解耦，使原本復(fù)雜的單體應(yīng)用拆分為多個(gè)相對(duì)獨(dú)立的應(yīng)用，使得每個(gè)模塊都可以單獨(dú)部署上線；通過(guò)設(shè)計(jì)應(yīng)用間的通信方式，解決了應(yīng)用間的數(shù)據(jù)共享問(wèn)題，打通了應(yīng)用之間的關(guān)聯(lián)性。前端微服務(wù)應(yīng)用于大型項(xiàng)目，對(duì)現(xiàn)階段臃腫的系統(tǒng)進(jìn)行拆分有著極大的幫助，一方面可以解耦單體應(yīng)用，使業(yè)務(wù)分離；另一方面，對(duì)項(xiàng)目部署上線及版本迭代也有著更快捷的提高。