跳到主要內容

微前端與項目實施方案研究


一、前言


微前端(micro-frontends)是近幾年在前端領域出現的一個新概念，主要內容是將前端應用分解成一些更小、更簡單的能夠獨立開發、測試、部署的小塊，而在用戶看來仍然是內聚的單個產品。微前端的理念源於微服務，是將龐大的整體拆成可控的小塊，並明確它們之間的依賴關係，而它的價值在於能將低耦合的代碼與組件進行組合，基座+基礎協議模式能接入大量應用，進行統一的管理和輸出，許多公司與團隊也都在不斷嘗試和優化相關解決技術與設計方案，為這一概念的落地和推廣添磚加瓦。結合自身遇到的問題，適時引用微前端架構能起到明顯的提效賦能作用。

二、背景


目前我司擁有大量的內部系統，這些系統採用相同的技術棧，在實際開發和使用過程中，逐漸暴露出如下幾個問題：

1.有大量可復用的部分，雖然有組件庫，但是依賴版本難統一；
2.靜態資源體積過大，影響頁面加載和渲染速度；
3.應用切換目前是通過鏈接跳轉的方式實現，會有白屏和等待時長的問題，對用戶體驗不夠友好；
針對上述幾個問題，決定採用微前端架構對內部系統進行統一的管理，本文也是圍繞微前端落地的技術預研方案。


三、方案調研


目前業界有多種解決方案，有各自的優缺點，具體如下：



  • 路由轉發：路由轉發嚴格意義上不屬於微前端，多個子模塊之間共享一個導航即可 簡單，易實現 體驗不好，切換應用整個頁面刷新；


  • 嵌套 iframe：每個子應用一個 iframe 嵌套 應用之間自帶沙箱隔離 重複加載腳本和樣式；


  • 構建時組合：獨立倉儲，獨立開發，構建時整體打包，合併應用 方便依賴管理，抽取公共模塊 無法獨立部署，技術棧，依賴版本必須統一；


  • 運行時組合：每個子應用獨立構建，運行時由主應用負責應用管理，加載，啟動，卸載，通信機制 良好的體驗，真正的獨立開發，獨立部署 複雜，需要設計加載，通信機制，無法做到徹底隔離，需要解決依賴衝突，樣式衝突問題；

    開源微前端框架也有多種，例如阿里出品的qiankun，icestark，還有針對angular提出的mooa等，都能快速接入項目，但結合公司內部系統的特點，直接採用會有有些限制，例如要實現定製界面，無刷新加載應用，且不能對現有項目的開發和部署造成影響，因此決定自研相關技術。



四、架構設計



4.1 應用層


應用層包括所有接入微服務工作台的內部系統，他們各自開發與部署，接入前後沒有多大影響，只是需要針對微服務層單獨輸出打包一份靜態資源；


4.2 微服務層


微服務層作為核心模塊，擁有資源加載、路由管理、狀態管理和用戶認證管理幾大功能，具體內容將在後面詳細闡述，架構整體工作流程如下：



4.3 基礎支撐層


基礎支撐層作為基座，提供微服務運行的環境和容器，同時接入其他後端服務，豐富實用場景和業務功能；


五、技術重難點


要實現自定義微前端架構，難點在於需要管理和整合多個應用，確保應用之間獨立運行，彼此不受影響，需要解決如下幾個問題：


5.1 資源管理


5.1.1資源加載


每個應用有一個應用資源管理和註冊的文件(app.regiser.js)，其中包含路由信息，應用配置信息(configs.js)和靜態資源清單，當首次切換到某應用時，首先加載app.register.js文件，完成路由和應用信息的註冊，然後根據當前瀏覽器路由地址加載對應的靜態文件，完成頁面渲染，從而將各應用的靜態資源串聯起來，其中註冊入口文件通過webpack插件來實現，具體實現如下：
 

FuluAppRegisterPlugin.prototype.apply = function(compiler) {
    appId = extraAppId();
    var entry = compiler.options.entry;
    if (isArray(entry)) {
             for (var i = 0; i < entry.length; i++) {
                 if (isIndexFile(entry[i])) { // 入口文件
                     indexFileEdit(entry[i]);
                     entry[i] = entry[i].replace(indexEntryRegx, indeEntryTemp); // 替換入口文件
                     i = entry.length;
                 }
             }
     } else {
             if (isIndexFile(entry)) { // 入口文件
                 indexFileEdit(entry); // 重新生成和編輯入口文件
                 compiler.options.entry = compiler.options.entry.replace(indexEntryRegx, indeEntryTemp); // 替換入口文件
             }
     }
     compiler.hooks.done.tap('fulu-app-register-done', function(compilation) {
             fs.unlinkSync(tempFilePath); // 刪除臨時文件
             return compilation;
     });
     compiler.hooks.emit.tap('fulu-app-register', function(compilation) {
         var contentStr = 'window.register("'+ appId + '", {\nrouter: [ \n ' + extraRouters() + ' \n],\nentry: {\n'; // 全局註冊方法
         var entryCssArr = [];
         var entryJsArr = [];
         for (var filename in compilation.assets) {
             if (filename.match(mainCssRegx)) { // 提取css文件
                 entryCssArr.push('\"' + filename + '\"');
             } else if (filename.match(mainJsRegx) || filename.match(manifestJsRegx) || filename.match(vendorsJsRegx)) { // 提取js文件
                 entryJsArr.push('\"' + filename + '\"');
             }
         }
         contentStr += ('css: ['+ entryCssArr.join(', ') +'],\n'); // css資源清單
         contentStr += ('js: ['+ entryJsArr.join(', ') +'],\n }\n});\n'); // js資源清單
         compilation.assets['resources/js/' + appId + '-app-register.js'] = { // 生成appid-app-register.js入口文件
             source: function() {
                 return contentStr;
             },
             size: function() {
                 return contentStr.length;
             }
         };
         return compilation;
     });
 };

5.1.2資源文件名

微服務輸出打包模式下，靜態資源統一打包形式以項目id開頭，形如10000092-main.js， 文件名稱的修改通過webpack的插件實現；


核心實現代碼如下：


FuluAppRegisterPlugin.prototype.apply = function(compiler) {
     ......
     compiler.options.output.filename = addIdToFileName(compiler.options.output.filename, appId);
     compiler.options.output.chunkFilename = addIdToFileName(compiler.options.output.chunkFilename, appId);
     compiler.options.plugins.forEach((c) => {
         if (c.options) {
             if (c.options.filename) {
                 c.options.filename = addIdToFileName(c.options.filename, appId);
             }
             if (c.options.chunkFilename) {
                 c.options.chunkFilename = addIdToFileName(c.options.chunkFilename, appId);
             }
         }
     });
    ......
 };

5.2 路由管理


路由分為應用級和菜單級兩大類，應用類以應用id為前綴，將各應用區分開，避免路由地址重名的情況，菜單級的路由由各應用的路由系統自行管理，結構如下：


5.3 狀態分隔


前端項目通過狀態管理庫來進行數據的管理，為了保證各應用彼此間獨立，因此需要修改狀態庫的映射關係，這一部分需要藉助於webpack插件來進行統一的代碼層面調整，包括model和view兩部分代碼，model定義了狀態對象，view藉助工具完成狀態對象的映射，調整規則為【應用id+舊狀態對象名稱】，下面來講解一下插件的實現；
 


插件的實現原理是藉助AST的搜索語法匹配源代碼中的狀態編寫和綁定的相關代碼，然後加上應用編號前綴，變成符合預期的AST，最後輸出成目標代碼：
 

module.exports = function(source) {
       var options = loaderUtils.getOptions(this);
 	stuff = 'app' + options.appId;
 	isView = !!~source.indexOf('React.createElement'); // 是否是視圖層
 	allFunc = [];
 	var connectFn = "function connect(state) {return Object.keys(state).reduce(function (obj, k) { var nk = k.startsWith('"+stuff+"') ? k.replace('"+stuff+"', '') : k; obj[nk] = state[k]; return obj;}, {});}";
 	connctFnAst = parser.parse(connectFn);
 	const ast = parser.parse(source, { sourceType: "module", plugins: ['dynamicImport'] });
 	traverse(ast, {
 		CallExpression: function(path) {
 			if (path.node.callee && path.node.callee.name === 'connect') { // export default connext(...)
 				if (isArray(path.node.arguments)) {
 					var argNode = path.node.arguments[0];
 					if (argNode.type === 'FunctionExpression') { // connect(() => {...})
 						traverseMatchFunc(argNode);
 					} else if (argNode.type === 'Identifier' && argNode.name !== 'mapStateToProps') { // connect(zk)
 						var temp_node = allFunc.find((fnNode) => {
 							return fnNode.id.name === argNode.name;
 						});
 						if (temp_node) {
 							traverseMatchFunc(temp_node);
 						}
 					}
 				}
 			} else if (path.node.callee && path.node.callee.type === 'SequenceExpression') {
 				if (isArray(path.node.callee.expressions)) {
 					for (var i = 0; i < path.node.callee.expressions.length; i++) {
 						if (path.node.callee.expressions[i].type === 'MemberExpression'
 							&& path.node.callee.expressions[i].object.name === '_dva'
 							&& path.node.callee.expressions[i].property.name === 'connect') {
 								traverseMatchFunc(path.node.arguments[0]);
 								i = path.node.callee.expressions.length;
 						}
 					}
 				}
 			}
 		},
 		FunctionDeclaration: function(path) {
 			if (path.node.id.name === 'mapStateToProps' && path.node.body.type === 'BlockStatement') {
 				traverseMatchFunc(path.node);
 			}
 			allFunc.push(path.node);
 		},
 		ObjectExpression: function(path) {
 			if (isView) {
 				return;
 			}
 			if (isArray(path.node.properties)) {
 				var temp = path.node.properties;
 				for (var i = 0; i < temp.length; i++) {
 					if (temp[i].type === 'ObjectProperty' && temp[i].key.name === 'namespace') {
 						temp[i].value.value = stuff + temp[i].value.value;
 						i = temp.length;
 					}
 				}
 			}
 		}
 	});
 	return core.transformFromAstSync(ast).code;
 };

5.4 框架容器渲染


完成以上步驟的改造，就可以實現容器中的頁面渲染，這一部分涉及到組件庫框架層面的調整，大流程如下圖：



六、構建流程


6.1 使用插件


構建過程中涉及到兩款自開發的插件，分別是fulu-app-register-plugin和fulu-app-loader；


6.1.1 安裝

npm i fulu-app-register-plugin fulu-app-loader -D;

6.1.2 配置

webpack配置修改:


const FuluAppRegisterPlugin = require('fulu-app-register-plugin');
 module: {
    rules: [{
          test: /\.jsx?$/,
          loader: 'fulu-app-loader',
       }
    ]
 }
 plugins: [
     new FuluAppRegisterPlugin(),
     ......
 ]

6.2.編譯


編譯過程與目前項目保持一致，相比以前，多輸出了一份微前端項目編譯代碼，流程如下：



七、遺留問題


7.1 js環境隔離


由於各應用都加載到同一個運行環境，因此如果修改了公共的部分，則會對其他系統產生不可預知的影響，目前沒有比較好的辦法來解決，後續將持續關注這方面的內容，逐漸優化達到風險可制的效果。

7.2.獲取token


目前應用切換使用重定向來完成token獲取，要實現如上所述的微前端效果，需要放棄這種方式，改用接口調用異步獲取，或者其他解決方案。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】



※帶您來了解什麼是 USB CONNECTOR  ?



※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面



※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!



※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化



※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益



※教你寫出一流的銷售文案?



※別再煩惱如何寫文案,掌握八大原則!


Orignal From: 微前端與項目實施方案研究

留言

張貼留言

這個網誌中的熱門文章

有了四步解題法模板，再也不害怕動態規劃！（看不懂算我輸）

導言 動態規劃問題一直是算法面試當中的重點和難點，並且動態規劃這種通過空間換取時間的算法思想在實際的工作中也會被頻繁用到，這篇文章的目的主要是解釋清楚 什麼是動態規劃 ，還有就是面對一道動態規劃問題，一般的 思考步驟 以及其中的注意事項等等，最後通過幾道題目將理論和實踐結合。 什麼是動態規劃 如果你還沒有聽說過動態規劃，或者僅僅只有耳聞，或許你可以看看 Quora 上面的這個 回答 。 How to explain dynamic 用一句話解釋動態規劃就是 " 記住你之前做過的事 "，如果更準確些，其實是 " 記住你之前得到的答案 "。 我舉個大家工作中經常遇到的例子。 在軟件開發中，大家經常會遇到一些系統配置的問題，配置不對，系統就會報錯，這個時候一般都會去 Google 或者是查閱相關的文檔，花了一定的時間將配置修改好。 過了一段時間，去到另一個系統，遇到類似的問題，這個時候已經記不清之前修改過的配置文件長什麼樣，這個時候有兩種方案，一種方案還是去 Google 或者查閱文檔，另一種方案是借鑒之前修改過的配置，第一種做法其實是萬金油，因為你遇到的任何問題其實都可以去 Google，去查閱相關文件找答案，但是這會花費一定的時間，相比之下，第二種方案肯定會更加地節約時間，但是這個方案是有條件的，條件如下： 之前的問題和當前的問題有着關聯性，換句話說，之前問題得到的答案可以幫助解決當前問題 需要記錄之前問題的答案 當然在這個例子中，可以看到的是，上面這兩個條件均滿足，大可去到之前配置過的文件中，將配置拷貝過來，然後做些細微的調整即可解決當前問題，節約了大量的時間。 不知道你是否從這些描述中發現，對於一個動態規劃問題，我們只需要從兩個方面考慮，那就是 找出問題之間的聯繫 ，以及 記錄答案 ，這裏的難點其實是找出問題之間的聯繫，記錄答案只是順帶的事情，利用一些簡單的數據結構就可以做到。 概念 上面的解釋如果大家可以理解的話，接    動態規劃 算法是通過拆分問題，定義問題狀態和狀態之間的關係，使得問題能夠以遞推（或者說分治）的方式去解決。它的幾個重要概念如下所述。    階段： 對於一個完整的問題過程，適當的切分為若干個相互聯繫的子問題，每次在求解一個子問題...
張貼留言
閱讀完整內容

計算機本地文件快要滅絕了

　　 編者按： 文件是数字世界的基石，是我們基本的工作單位。但是，隨着互聯網的雲化、平台化、服務化，文件日益變得可有可無。這樣一種改變究竟好不好呢？喜歡懷舊的 Simon Pitt 開始回顧各種文件的好處，哪怕這讓他顯得不合時宜。原文發表在 medium 上，標題是：Computer Files Are Going Extinct 　　我喜歡文件。我喜歡對文件重命名、移動、排序，改變它們在文件夾中的显示方式，去備份文件，將之上傳到互聯網，恢復它們，對其進行複製，甚至還可以對文件進行碎片整理。作為信息存儲方式的一種隱喻，在我看來文件是很出色的。我喜歡把文件當作一個工作單位。如果我要寫篇文章，文章會放在文件裏面。如果我要生成圖像，圖像會保存進文件裏面。 　　 謳歌 files.doc 　　文件是擬物化的。這是個很花哨的詞，只是用來表示文件是反映現實物品的一個数字概念。比方說，Word 文檔就像一張紙，躺在你的辦公桌上（desktop）。JPEG 就像一幅畫，等等。它們每個都有一個小圖標，圖標的樣子看起來像它們所代表的現實物品。一堆紙，一個畫框，一個馬尼拉文件夾。真的挺很迷人的。 　　我喜歡文件的一點是，不管裏面有什麼，跟文件的交互方式總是一致的。我上面提到的那些東西——複製、排序、碎片整理——我可以對任何文件進行那些處理。文件可能是圖像、遊戲的一部分、也可能是我最喜歡的餐具清單。碎片整理程序不在乎它是什麼。它不會去判斷內容。 　　自從我開始在 Windows 95 裏面創建文件以來，我就一直都很喜歡文件。但是我注意到我們已經開始慢慢地遠離把文件當作基本工作單位的做法。 Windows95。我的計算機 　　 services.mp3 的興起 　　十幾歲的時候，我開始痴迷於收集和管理数字音樂：我收藏 MP3 文件。一大堆的 128 kbps MP3 文件。如果你足夠幸運，有自己的 CD 刻錄機的話，就可以將它們刻錄到 CD 上，然後在朋友之間傳遞。一張 CD 可以容納 700 MB。這相當於將近 500 張軟盤！ 　　我會仔細端詳我的收藏，然後煞費苦心地給它們添加上 IDv1 和 IDv2 音樂標籤。隨着時間的流逝，大家開始開發可以在雲端自動獲取曲目列表的工具，這樣你就可以檢查和驗證 MP3 的質量。有時候我甚至會去聽那些該死的東西，儘管...
張貼留言
閱讀完整內容

純電動 Mini Cooper SE 將成為中國國產車，年產 16 萬輛

BMW 集團與中國長城汽車合資，將於江蘇建立新廠，專門投入生產 MINI Cooper SE 和部分長城品牌電動車，預計於 2022 年完工並投入生產，每年將可生產 16 萬輛電動車。 靈動可愛的 Mini Cooper，在許多車迷心中都有著特殊的地位，今年 7 月發表了首款純電動版本的 Mini Cooper SE 之後，獲得熱烈迴響，預訂數量已接近 8 萬台，顯示大家對於純電 Mini 的熱愛，因為油電版的 Mini Cooper Countryman 的全球總銷售量也才 3 萬出頭。 Mini Cooper SE 之前公布了官方定價，最低從 27,900 歐元起算，美國售價約 29,900 美元。相比現有的三門款，只貴了一成左右。然而，三年後，中國消費者將有機會買到最便宜的電動 Mini。 電動 Mini Cooper SE 最低價是 27,900 歐元，扣掉全額補助最低可以到 24,400 歐元。 BMW 集團與中國長城汽車集團於 2018 年宣布，將組建合資公司光束汽車，投入在中國的電動車生產計畫，而現在他們正式宣布啟動計畫，於江蘇張家港打造一個新工廠，全部投入電動車的製造，包括了 Mini Cooper SE 和其他長城汽車旗下的電動車。 目前的電動 Mini 只在英國牛津工廠製造，不難想像當產能轉移到中國後，Mini Cooper SE 的價格將有機會進一步調降，來競爭全球最大的電動車市場。這座屬於合資公司光束汽車的新工廠，採用一個新的產銷模式，由 BMW 和長城共同合作開發、設計、製造新產品，但是銷售通路完全沿用原本的品牌渠道。 換句話說，2020 年到 2022 年銷售的電動 Mini，將會是英國製造，而 2022 年後就會有中國製造版本開賣，考量到 Mini 在中國每年約有 30 萬輛的銷售額，同時油電版的 Coutryman 銷量更佔了全球將近五分之一，無怪乎 BMW 會想在最接近主要市場的地方蓋工廠囉。 外型完美復刻油車版 最後，簡單介紹一下 Mini Cooper SE 這台車。Mini 在電動化的路上，盡力保持著跟經典造型一致的設計，畢竟大家愛的就是它的設計。電動版的 Mini 車頭、車身跟車屁股都多了一個黃色的插頭標誌，車頭的氣壩則變成封閉式設計，除此之外，幾乎看不出來差別，連馬達...
張貼留言
閱讀完整內容