在我之前的文章中(本文末尾的鏈接)，我展示了有關(guān)微前端的動(dòng)手以及如何創(chuàng)建它們。在本文中，我將恢復(fù)退步并解釋什么是微型前端，為什么我們需要使用它們和不同的方式來(lái)實(shí)現(xiàn)它們。這請(qǐng)幫助我為我公司提供建議的建議，我希望它能讓讀者有益于為您的項(xiàng)目提供合適的架構(gòu)選擇。

什么是微前端

Martin Fowler將微前端架構(gòu)定義為“一種獨(dú)立可交付前端應(yīng)用程序被組成的建筑風(fēng)格”。簡(jiǎn)單地，微前端是網(wǎng)頁(yè)的一部分(不是整頁(yè))。在微前端架構(gòu)中，有一個(gè)“主機(jī)”或“容器”頁(yè)面，可以托管一個(gè)或多個(gè)微前端。主機(jī)/容器頁(yè)面還可以共享一些自己的微前端組件。

例如，正如我們?cè)谙惹暗奈恼轮袑?shí)現(xiàn)的那樣，我們將按鈕組件從MFE1頁(yè)面暴露到MFE2(主機(jī)/容器)中

或者在

http://mfe1.s3-website-us-east-a.amazonaws.com/在本文中部署到S3

微型前端架構(gòu)由3個(gè)主要組件組成：

• 微前端(在上一個(gè)示例中，MFE1的按鈕是微前端)
• 主機(jī)/容器(在前面的示例中，MFE2是主機(jī))
• 微型框架：我們使用了WebPack 5模塊聯(lián)合插件

為什么微型前端?

引入了微前端架構(gòu)以解決當(dāng)前SPA前端開(kāi)發(fā)的多個(gè)問(wèn)題。我經(jīng)歷了單個(gè)網(wǎng)站的增長(zhǎng)，以至于它變得非常難以擴(kuò)大，修改甚至培訓(xùn)新工程師成為其中的一部分。通過(guò)這種單片系統(tǒng)，開(kāi)發(fā)人員將彼此封鎖，以應(yīng)用一個(gè)小變化。以下是微型前端的一些好處：

• 團(tuán)隊(duì)可擴(kuò)展性：多個(gè)團(tuán)隊(duì)可以獨(dú)立工作以貢獻(xiàn)多個(gè)系統(tǒng)。這使我們能夠?qū)⒐ぷ鲃澐植⑼ㄟ^(guò)多個(gè)團(tuán)隊(duì)縮放。
• 單一責(zé)任：這將允許每個(gè)團(tuán)隊(duì)構(gòu)建單一責(zé)任的組件。托管團(tuán)隊(duì)可以專(zhuān)注于分析，性能和每個(gè)功能團(tuán)隊(duì)可以專(zhuān)注于客戶(hù)。兩支球隊(duì)可以在其特定領(lǐng)域獲得100%。主頁(yè)團(tuán)隊(duì)可以在創(chuàng)建大型主頁(yè)上關(guān)注100%。每個(gè)微型前端團(tuán)隊(duì)將焦點(diǎn)100%的微觀前端的功能。
• 可重用性：我們將能夠在多個(gè)地方使用代碼。將構(gòu)建和部署一個(gè)組件，不同的團(tuán)隊(duì)可以重新使用它。
• 技術(shù)不可知論：微型前端架構(gòu)獨(dú)立于技術(shù)。您可以使用來(lái)自不同技術(shù)的組件(JavaScript，React，Vue，Angular …)。您不必?fù)?dān)心部署或構(gòu)建它們。
• 學(xué)習(xí)曲線：對(duì)于加入團(tuán)隊(duì)的新工程師，更容易學(xué)習(xí)較小的應(yīng)用程序，而不是了解具有數(shù)千行代碼線的巨石。

如何實(shí)施微型前端?

微前端的主要是主機(jī)/容器和微前端之間的集成。有三種方法可以整合微型前端

構(gòu)建時(shí)集成

這是今天實(shí)施的大部分代碼。容器將將組件安裝為庫(kù)，類(lèi)似于您從NPM安裝的庫(kù)。此方法的問(wèn)題正在同步圖書(shū)館的不同版本和構(gòu)建問(wèn)題。此外，很難使用不同的技術(shù)。此外，最終包的大小將很大，因?yàn)樗幸蕾?lài)項(xiàng)。此外，您必須再次部署依賴(lài)性的任何更改。而且，容器和所有微前端之間存在緊密的耦合。

運(yùn)行時(shí)集成

這是我在以前的文章中解釋的。在這種情況下，容器是單獨(dú)構(gòu)建和部署的。每個(gè)微前端都可以作為單獨(dú)的包裝作為一個(gè)單獨(dú)的包裝，即容器/主機(jī)可以獲取所需的微前端。有關(guān)此方法的更多解釋?zhuān)?qǐng)參閱本文末尾的文章列表。在這種情況下，容器和微前端完全取耦合。它們不共享構(gòu)建或部署，并可以使用不同的技術(shù)。容器可以決定要部署的微前端版本。

服務(wù)器端集成

在這種情況下，所有功能都將在確定要加載的微前端的后端中。服務(wù)器將決定將該請(qǐng)求路由到的URL。這是一個(gè)標(biāo)準(zhǔn)的服務(wù)器端構(gòu)圖。