方燕瓊，唐升衛(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ù)雜等特點[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è)過程中，多以單一功能模塊形成孤立的垂直系統(tǒng)為主，容易形成信息孤島，而構(gòu)建高性能的跨系統(tǒng)集成平臺，將有助于配電網(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)不斷地升級和變化[7,8]。智能配電網(wǎng)業(yè)務(wù)結(jié)構(gòu)如圖1所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 整體思路

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

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

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

3.2 具體實現(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)論

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