微前端技術的發展與應用

張 潔，王燕梅，韓 強

（1.瓊臺師范學院信息科學技術學院，海南 ?？?571100；2.瓊臺師范學院教育大數據與人工智能研究所，海南 ?？?571100）

對于企業的生產和發展而言，良好的管理系統可以有效地促進企業的進一步發展，因此數據管理系統的便捷性和高效性是極其重要的。但是傳統的Web 前端技術無法給予數據管理系統良好的操作性能，往往會有一些問題，例如開發過程中使用的框架單一，原有的代碼因為技術更新不及時而無法直接遷移等。為了解決前端技術的不足，需要應用微前端技術將各個應用拆分為幾個多應用的聚合，這樣才能夠讓各個部分都能夠獨立地開發、運行，在出現問題時也能夠更高效地解決。

1 微前端概念

微前端是將Web 應用由單一的單體應用轉變為多個小型前端應用聚合為一的應用，各個前端應用還可以獨立運行、獨立開發、獨立部署。微前端不是單純的前端框架或者工具，而是一套架構體系。

1.1 國內外研究現狀

隨著時代的發展，軟件技術在不斷更新，而Web 的開發模式也日漸簡化，從最早的前后端的整體，到后面形成前后端分離的模式，經歷了幾次技術的革新。前端的MVC框架，可以有效地保存和處理數據，并且生成相關的視圖；而后出現了前端的MVVM 設計模式，它能夠將MVC 框架中的控制器用視圖模型層進行替換，這樣可以有效地將用戶的界面和業務邏輯的開發區進行區分，這樣對于開發者而言能夠有針對性地進行業務的邏輯處理。

國外很早就開始對前后端的分離技術進行了研究，目前主要流行的是Angular.js，React.js，Vue.js 這幾類框架。Angular.js 是由谷歌開發維護的，引入了MVC 開發模式，主要是在海外應用較多；React.js 由Facebook 團隊開發完成，使用虛擬DOM 機制以及組件驅動的開發方式，在國內外都被廣泛應用。而Vue.js 由中國軟件工程師尤雨溪借鑒Angular.js 和React.js 的設計思想進行開發的，在國內各種互聯網公司中都得到了廣泛應用。

1.2 微前端實現框架

現在在微前端中較常應用的技術有：借助前端路由將前端應用微服務化、借助iframe 技術實現微前端、利用Web Components 技術實現微前端以及Single-spa 等自研微前端框架。第一個主要是通過路由可以將不同的業務模塊分開，讓其能夠各自獨立到自己的子應用中去，主要是通過Nginx 服務器反向代理，或者前端框架自帶的Route來解決，這種方法較為簡單，但是在每次不同的應用進行跳轉的時候會存在弊端，即每次都要刷新頁面，而這個過程中每個子應用的加載時間不一致，時間過長時整個應用會有很長的白屏時間，會嚴重影響用戶的體驗感。第二種的優勢在于它提供了瀏覽器原生自帶的硬隔離方案，這樣能夠讓一個html 頁面完全嵌入到另一個html 頁面中，也能夠保證子應用間的完全獨立，并且它是以iframe 的方式集成到主程序中，從而保證每個模塊都能應用不同的技術棧進行獨立地開發，但是也會存在弊端，就是子應用間的內存變量是無法共享的，也因此導致了加載效率的下降。第三種是通過Web Components 技術整合所有模塊，每個組件能夠組織好自己的HTML、CSS 和JavaScript 代碼，它能夠允許開發者在外部封裝可重用的定制化元素，按照需要用在Web 前端應用上。最后Single-spa 支持幾乎大部分當前主流前端框架的啟動和卸載處理，兼容目前主流的技術棧，拆分后的模塊可以做到完全獨立，同時能夠依據具體需要來指定加載時機，提高性能，但是單純地使用它是沒辦法開箱即用，需要對子應用進行較多的改造，增加了開發的復雜度。

2 微前端相關技術

2.1 微前端技術

微前端技術是在微服務技術的基礎上產生的，它能夠將多個子系統集成在主系統中，這樣能夠形成一個完整的應用，并且每一個子系統具有獨立開發和運行的功能，用戶可以任意訪問各個子應用。微前端架構的實現是目前的主流方式，就是利用“主從”思想，整個系統包括一個主應用和多個子應用構成。其中主應用為系統的核心工程，主要負責路由控制、應用注冊、應用加載、生命周期管理等。而子應用可以分別看作為多個獨立的應用，每個應用可以不限制技術棧，當它們要跟主應用構成一個更大的系統時，它們需要分別注冊到主應用中，當然即使脫離了主應用各個子應用也是可以單獨訪問的。在目前的微前端解決方案中，Singlespa 框架以及qiankun 較為常用。前者是將生命周期管理應用于整個系統，這樣使得子應用可以在不刷新頁面的情況下進行跳轉，它的優點是幾乎支持所有的JavaScript 框架，針對Vue、React 等框架都有諸如single-spa-vue、singlespa-react 的庫，它也支持多種不同的構建工具。

2.2 TypeScript 編程語言

TypeScript 編程語言是JavaScript 的超集，它可以在各種瀏覽器上面進行運行，還可以在隔離操作上運行，而且不會存在兼容性問題，它提供的一套規范可以有效實現類型推斷、對代碼進行靜態類型檢查，并且減少了例如空處理、未定義等很多錯誤，而且可以利用它提前發現代碼漏洞，這極大地提高了開發者的開發效率，并且它的強類型規范使得代碼都非常整潔和有組織性，而且具有泛型、繼承等特性。由于TypeScript 的開源性，開發者可以自由修改其源代碼，同時它的框架設計很優秀，提供的API 接口很充分，給開發者帶來了進一步擴展。而且通過TypeScript Compiler API，開發者可以自己實現編譯器，語法檢查自我定義，以及自定義輸出結構等。由于編譯器核心靈活的結構，開發者只需要簡單地添加一些代碼，就可以在IDE 中支持TypeScript 的諸多特性。而且在Type－Script 中對象聲明為any 類型就忽略檢查的機構，保證了它保留一些弱類型的靈活，又兼顧了強類型檢查的優勢。

在最近幾年中，TypeScript 越來越流行，在Angular、React 以及Vue 中都充分得到了應用，而且由于Type－Script 的語法跟JavaScript 沒有太大的明顯區別，前端開發者可以用極低的學習成本無縫開始使用TypeScript，這使得它的使用者更多。

2.3 前端開發框架

前端開發框架中較為常用的是Angular 和React，以及vue。React 是一個用于構建用戶界面的JavaScript 庫。它是目前世界范圍內統計使用人數最多的幾大前端框架之一，目前國內的螞蟻金服也基于React 為開發者提供了大量技術支持，例如在系統中使用的Ant Design 組件庫等。而Vue.js，它是一款理念先進的前端漸進式JavaScript框架，易用、靈活并且高效，它吸收了React 數據驅動和組件化的思想，借鑒了Angular 的雙向數據綁定的思想并加以改進，同時周邊技術生態也極為豐富。Vue 的組件實質就是可以復用的Vue 的實例，與React 類似，可以將復雜的頁面拆分為多個復用性高的、獨立的小組件，并把他們嵌套聚合在一起，既提高了代碼的可讀性，也為開發者的維護提供了方便。組件之間需要進行數據傳遞時可以有多種方式，官方提供的就有props 傳值、借助$emit 傳值、借助eventbus 傳值、使用$ref 傳值、通過官方提供的Vuex 狀態管理傳值等多種方法，為開發者提供了極大的便利。

2.4 G6 圖可視化引擎

G6 是一個非常完備的圖可視化引擎，有著便捷、靈活等特點，它能夠依據豐富的api，為開發者提供高定制化能力，例如圖的繪制、布局、交互等可視化能力，并且也能夠提供圖可視化的解決方法等，而對于它的創建也極其簡單，主要就是創建關系圖、創建關系圖的HTML 容器、數據準備、配置數據源、渲染等步驟，它是屬于純avascript庫，因而可以在諸如React、Vue 和Angular 等前端框架中使用，使用較為廣泛。

3 微前端的應用

3.1 前端工程化

Web 在發展的過程中業務越來越復雜，因此在前端的開發過程中運用工程化的方式可以將開發的效率和質量提高，并且能夠有效降低開發的成本。前端的工程化主要包括規范化、自動化、組件化以及模塊化。首先是規范化，項目開發規范的制定對于前端工程化來說十分關鍵，例如清晰的目錄結構能夠很好地提高項目的結構合理性，或者良好的代碼規范可以有效地提高代碼質量以及有利于團隊協作開發，而且合理的前后端接口規范能有利于團隊溝通，提升開發效率。其次是自動化，在項目開發過程中，如果遇到重復的操作應該盡量考慮采用合適的自動化工具來幫助開發者完成項目開發。然后是組件化，頁面上所有的東西其實都可以看作一個組件。這種組件化思想也被Vue、React 和Angular 等框架借鑒，大的組件可以逐漸向下拆分，所有的組件構成一個完整的頁面，每個組件的功能逐漸細化，這可以極大地提高代碼的復用性并且有利于后期的維護。最后是模塊化，如今模塊化方案一般有ES6 規定的模塊系統，以及社區指定的一些諸如CommonJs、AMD 和CMD 方案。目前ES6 的模塊系統幾乎已經可以完全取代之前的CommonJs 規范等方案，它也是目前的主流。

3.2 數據管理系統應用

在數據管理系統中應用微前端框架主要是因為它具有不限制技術棧、實現增量升級、具有獨立性以及高容錯率等優點。對于主應用而言，不限制技術棧，可以使得接入的子應用的技術?？梢圆扇《喾N框架，并且每個子應用都有自主權，這樣在不同子應用的開發中都可以根據開發人員的能力特點進行合適的技術棧的選擇，這樣也使得開發的過程更加便捷；在增量升級的過程中，可以將遺產代碼、復雜的業務場景進行簡化，實現漸進式重構，能夠有效地降低企業開發時間成本和經濟成本；獨立性是指可以獨立開發、部署、運行，開發者在后期即使不用了解整個龐大的系統也可以專注在自己的業務邏輯模塊，提高了開發效率；而高容錯率是保證正確的應用能夠正常運行的關鍵。

并且在數據管理系統中，可以應用微前端工程化的方式，例如可以運用webpack 打包構建工具，它在運行時會遞歸構建依賴關系圖，其中包含應用程序需要的所有模塊，將這些模塊打包為一個或者多個bundle 提供給瀏覽器使用，并且它支持ES6 等多種模塊化規范以及熱替換功能（HMR），開發過程中未修改配置文件時無需重新對項目進行打包構建，節省了開發時間，極大地方便了開發者。

4 結束語

微前端技術實現了前后端分離，能夠有效地降低開發的難度，提高各子應用的獨立性，這樣開發人員也能夠依據自身的優勢選擇合適的框架進行程序的書寫，并且能夠有效地解決開發過程中使用的框架單一，原有的代碼因為技術更新不及時而無法直接遷移等問題。隨著時代的發展，微前端的技術也日益豐富，目前較為常用的是Singlespa 框架、Qiankun、TypeScript 編程語言、React、Vue 以及G6 等。在微前端的應用中使用工程化的方式會更加有助于項目的開發和管理，并且在數據管理系統中應用微前端技術可以不限制技術棧同時能夠實現增量升級，而它的獨立性以及高容錯率也是其應用廣泛的原因。