譯者 | 李睿

審校 | 重樓

事實(shí)表明，前端開發(fā)伴隨著許多挑戰(zhàn)。而尋找簡化開發(fā)過程和加快任務(wù)執(zhí)行的方法是每個(gè)開發(fā)團(tuán)隊(duì)的目標(biāo)。在開發(fā)大型復(fù)雜產(chǎn)品時(shí)，讓開發(fā)團(tuán)隊(duì)成員在任務(wù)上進(jìn)行協(xié)作是非常困難的。值得慶幸的是，微前端為應(yīng)對這些提供了解決方案。

微前端需要將前端單體拆分為幾個(gè)更小、更容易管理的部分。這種開發(fā)架構(gòu)非常重要，因?yàn)樗梢蕴岣唛_發(fā)人員處理前端代碼的效率。本文將探討React中的微前端是什么，以及微前端的優(yōu)點(diǎn)和缺點(diǎn)、實(shí)現(xiàn)選項(xiàng)和微前端架構(gòu)。還將提供示例，以幫助開發(fā)人員在實(shí)際層面上掌握所有內(nèi)容。

什么是微前端?

微前端是一種最新的開發(fā)模式，其中Web應(yīng)用程序用戶界面（UI）由自主組件組裝而成。

這些組件可以由不同的團(tuán)隊(duì)使用不同的技術(shù)來構(gòu)建。微前端的架構(gòu)類似于后端，后端是使用半獨(dú)立的微服務(wù)構(gòu)建的。

多年來，微前端逐漸在開發(fā)領(lǐng)域得到普及和接受。就像后端的微服務(wù)一樣，每個(gè)應(yīng)用程序（在微前端）都是單獨(dú)存在的，具有定義明確的功能或目標(biāo)。

例如，一個(gè)典型的網(wǎng)站有主頁、“關(guān)于我們”的頁面、服務(wù)頁面、結(jié)帳頁面、付款頁面等等。根據(jù)微前端的概念，每個(gè)頁面都可以作為一個(gè)獨(dú)立的應(yīng)用程序開發(fā)。

軟件開發(fā)團(tuán)隊(duì)也可以分為專門的團(tuán)隊(duì)。因此，一個(gè)開發(fā)團(tuán)隊(duì)可以負(fù)責(zé)編寫主頁，而另一個(gè)開發(fā)團(tuán)隊(duì)負(fù)責(zé)編寫服務(wù)頁面，以此類推。

這種方法有很多優(yōu)點(diǎn)。微前端架構(gòu)旨在幫助工程師克服當(dāng)前SPA前端開發(fā)的挑戰(zhàn)。

使用這種最新的前端開發(fā)方法，開發(fā)人員可以簡化任務(wù)，鼓勵(lì)協(xié)作，提高過程的效率，并顯著提高生產(chǎn)力。

微前端的簡史

微服務(wù)在軟件架構(gòu)師于2011年舉辦的一個(gè)活動(dòng)中得到了解釋。微服務(wù)在當(dāng)時(shí)是許多公司都在嘗試的一種開發(fā)風(fēng)格。隨著時(shí)間的推移，微服務(wù)作為一種后端開發(fā)架構(gòu)的優(yōu)勢變得越來越成功。

出于進(jìn)化的目的，軟件及咨詢機(jī)構(gòu)Thought Works公司在2016年11月提出了“微前端”這個(gè)術(shù)語，這是一種類似于微服務(wù)的前端架構(gòu)。因此，很多企業(yè)開始嘗試使用新架構(gòu)創(chuàng)建前端的框架。

2017年11月，Thought Works公司推薦Single Spa實(shí)施微前端。而在2019年，Martin Fowler撰寫了一篇廣受歡迎的文章，其名稱為《微前端》，該文章推廣了微前端架構(gòu)。在2020年底，Zack Jackson發(fā)布了模塊聯(lián)邦（Module Federation），這是一個(gè)包含在Webpack 5中的插件。

模塊聯(lián)邦徹底改變了微前端空間。組織現(xiàn)在已經(jīng)采用插件將有問題的單片應(yīng)用程序轉(zhuǎn)移到微前端。也就是說，微型前端仍處于初級階段，人們可以期待看到更多革命性的變化。

如何開發(fā)微前端?

在定義了微前端及了解其簡要?dú)v史之后，現(xiàn)在探索開發(fā)微前端的不同方法。開發(fā)人員可以使用以下三種方法構(gòu)建微前端：

• 使用模塊聯(lián)邦
• 使用Web組件
• 采用IFrames

1.模塊聯(lián)邦

模塊聯(lián)邦是Webpack 5的一個(gè)插件，能夠開發(fā)各種不依賴于彼此的功能。因此，它們可以單獨(dú)建造和推出。使用該插件，開發(fā)商可以快速創(chuàng)建多個(gè)函數(shù)來組成單個(gè)產(chǎn)品。

（1）是什么讓模塊聯(lián)邦變得有趣?

模塊聯(lián)邦的一些功能可以滿足開發(fā)人員的開發(fā)需求。以下是開發(fā)人員應(yīng)該使用它的原因：

• 解決依賴性挑戰(zhàn)：該插件具有允許開發(fā)人員解決依賴性問題的功能。
• 出色的代碼共享：它為開發(fā)人員提供了更好的代碼共享方式。開發(fā)人員可以公開Webpack支持的任何應(yīng)用程序的任何代碼。
• 不依賴于環(huán)境：可以在不同的平臺(tái)上應(yīng)用共享代碼。它不依賴于任何環(huán)境的事實(shí)消除了與不兼容性相關(guān)的任何挑戰(zhàn)。

（2）模塊聯(lián)邦配置

插件需要配置才能正確使用。開發(fā)人員需要知道配置如何工作以充分利用軟件。以下是需要熟悉的主要配置選項(xiàng)：

• 名稱：這里指暴露容器的的專有名稱。即在容器插件時(shí)輸入的名稱，被模塊聯(lián)邦使用，成為容器的相對路徑。
• 庫：庫決定了如何存儲(chǔ)和訪問公開的代碼。庫函數(shù)允許開發(fā)人員進(jìn)一步配置，以確定名稱和類型。
• 文件名：這是輸出包的文件名。此外，它還可以作為捆綁包的入口點(diǎn)。
• 遠(yuǎn)程：遠(yuǎn)程配置選項(xiàng)與靜態(tài)遠(yuǎn)程模塊列表有關(guān)。本地模塊可以訪問這些遠(yuǎn)端模塊。
• 共享：這個(gè)配置選項(xiàng)允許開發(fā)人員共享其節(jié)點(diǎn)庫。該選項(xiàng)還提供了一系列配置函數(shù)，使開發(fā)人員能夠確定如何共享庫。

還需要了解其他Webpack配置功能，包括輸出、實(shí)驗(yàn)和優(yōu)化。為了能夠正確開發(fā)具有模塊聯(lián)合的微型前端，有必要對這些配置選項(xiàng)有充分的了解。

2. Web組件

Web組件是低級瀏覽器應(yīng)用程序編程接口，它使開發(fā)人員能夠使用新組件擴(kuò)展瀏覽器。此外，Web組件為定義或確定新組件提供了一個(gè)標(biāo)準(zhǔn)接口。

這個(gè)工具對于當(dāng)前的Web設(shè)計(jì)和開發(fā)非常有用，因?yàn)殚_發(fā)人員可以利用組件來容納用戶界面功能。使用Web組件，可以開發(fā)利用其他前端框架使用的HTML和DOM API的組件。

這個(gè)實(shí)現(xiàn)很有趣，因?yàn)殚_發(fā)人員可以在不失去互操作性的情況下享受開發(fā)自己組件的靈活性。一旦構(gòu)建了一個(gè)Web組件，就可以把它應(yīng)用到各種各樣的應(yīng)用程序中，因?yàn)閃eb組件在任何地方都有功能。

Web組件的三個(gè)主要概念

開發(fā)人員需要理解Web組件的三個(gè)概念：

（1）自定義元素：這些JS API使開發(fā)人員能夠構(gòu)建自定義HTML元素。在開發(fā)自己的HTML元素時(shí)，可以準(zhǔn)確地規(guī)定它們的行為方式。

（2）Shadow DOM：這是指僅對開發(fā)人員的組件可用的私有DOM。Shadow DOM能夠隔離JS和CSS。

（3）HTML模板：這些HTML標(biāo)簽可以用來為組件構(gòu)建模板。

3.IFrames

IFrames允許開發(fā)人員實(shí)現(xiàn)微前端。基本上，IFrames是可以合并到另一個(gè)HTML文檔中的HTML文檔。IFrames之所以受到歡迎，是因?yàn)樗梢院苋菀椎貜莫?dú)立的子頁面中開發(fā)出一個(gè)主頁。當(dāng)涉及到樣式和全局變量不相互影響時(shí)，IFrames提供了合理的隔離級別。

盡管IFrames總體上很棒，但它也有一些缺點(diǎn)。IFrames是陳舊的技術(shù)，因此不能提供最好的開發(fā)人員和用戶體驗(yàn)。使用它們會(huì)帶來影響頁面響應(yīng)性的某些困難。然而，IFrames可以用來開發(fā)微前端。

IFrames的一個(gè)主要優(yōu)勢是它們能夠在微前端之間提供獨(dú)立性和良好的隔離級別。這使開發(fā)人員能夠充分利用微前端架構(gòu)的優(yōu)勢。另一方面，它們使微前端彼此集成變得困難。此外，IFrames缺乏靈活性，難以鏈接和路由。

微前端的好處和權(quán)衡

微前端是一種新的前端架構(gòu)，它解決了傳統(tǒng)的單體前端架構(gòu)帶來的一些主要問題。以下了解微前端的優(yōu)點(diǎn)和缺點(diǎn)。

1.微前端的優(yōu)點(diǎn)

（1）漸進(jìn)式升級：向大型、陳舊、單一的前端應(yīng)用添加新功能既麻煩又困難。使用微前端，開發(fā)人員的團(tuán)隊(duì)可以通過將應(yīng)用分解成不同的部分來快速升級并提供新功能。與其將前端架構(gòu)作為單個(gè)應(yīng)用程序來處理，不如將應(yīng)用程序的不同部分分別處理，并分別交付新功能。

這種方法使團(tuán)隊(duì)能夠?qū)σ蕾図?xiàng)、用戶體驗(yàn)、加載速度、體系結(jié)構(gòu)等應(yīng)用增量升級。開發(fā)團(tuán)隊(duì)可以簡化他們的工作，專注于產(chǎn)品的特定部分。這為新技術(shù)的全面決策和高質(zhì)量實(shí)施創(chuàng)造了一個(gè)平臺(tái)，而不是必須接近一個(gè)龐大而繁瑣的前端應(yīng)用程序。

（2）簡單的代碼庫：開發(fā)人員面臨的挑戰(zhàn)之一是復(fù)雜的代碼庫。處理復(fù)雜的代碼庫本身就是開發(fā)人員的一項(xiàng)工作，因?yàn)樾枰裢庑⌒模员苊饣煜ｉ_發(fā)人員可以用一個(gè)微前端把這些都放在過去。這種新方法將事情分解成不同的、更小的代碼庫，從而為開發(fā)人員提供所需的簡單性和最佳的清晰度。

在默認(rèn)情況下，每個(gè)前端應(yīng)用程序的代碼將比單體代碼更小。因此，它更容易使用。除了提供整潔的代碼庫之外，還在組件之間設(shè)置了適當(dāng)?shù)倪吔纭Ｒ虼耍_發(fā)人員在試圖修復(fù)錯(cuò)誤或更改代碼時(shí)不太可能感到困惑或沮喪。

（3）獨(dú)立部署：微前端支持獨(dú)立部署。由于存在獨(dú)立構(gòu)建的多個(gè)前端應(yīng)用程序，可以單獨(dú)部署每個(gè)應(yīng)用程序。無論代碼駐留或托管在哪里，每個(gè)微前端都應(yīng)該有一個(gè)開發(fā)管道，使開發(fā)人員能夠構(gòu)建、測試和部署。

獨(dú)立部署的能力使開發(fā)人員能夠更快地發(fā)布特性。例如，當(dāng)使用單體前端應(yīng)用程序時(shí)，必須等到完成應(yīng)用更改后才能部署。使用微前端方法，產(chǎn)品的單獨(dú)部分不會(huì)阻止開發(fā)人員部署已準(zhǔn)備好的部分。

（4）自治團(tuán)隊(duì)：微前端的模塊化允許專注于產(chǎn)品的特定部分。如果有一個(gè)較大的團(tuán)隊(duì)，可以通過將團(tuán)隊(duì)分成小組來提高效率。每組開發(fā)人員將負(fù)責(zé)產(chǎn)品的給定部分，從而提高關(guān)注度，使工程師能夠以最高效率構(gòu)建特定功能。

除了鼓勵(lì)專業(yè)化和提高交付代碼的質(zhì)量之外，團(tuán)隊(duì)管理和協(xié)作也得到了加強(qiáng)。此外，當(dāng)團(tuán)隊(duì)規(guī)模較小時(shí)，更容易知道誰在做什么。

開發(fā)團(tuán)隊(duì)負(fù)責(zé)人還會(huì)發(fā)現(xiàn)，與規(guī)模更大的團(tuán)隊(duì)相比，任務(wù)分配和監(jiān)控變得更加容易。總的來說，自主的小團(tuán)隊(duì)創(chuàng)造了一個(gè)促進(jìn)協(xié)作和技能轉(zhuǎn)移的舒適空間。

（5）技術(shù)不可知論：微前端允許開發(fā)人員將每個(gè)應(yīng)用程序作為一個(gè)模塊進(jìn)行維護(hù)，并將它們與其他模塊分開。因此，可以使用不同的技術(shù)、框架或庫來開發(fā)每個(gè)應(yīng)用程序。多樣化開發(fā)技術(shù)或框架的能力允許開發(fā)人員使用最好的工具構(gòu)建健壯的產(chǎn)品。

產(chǎn)品的每個(gè)部分都是不同的，構(gòu)建它們所需的工具也是不同的。微前端不再局限于一組給定的框架，而是為開發(fā)人員提供了自由探索與每個(gè)模塊相關(guān)的開發(fā)工具的靈活性。

2.微前端與React的權(quán)衡

（1）更大的下載大小：重復(fù)的依賴關(guān)系是微前端導(dǎo)致更大的下載大小的原因。考慮到每個(gè)應(yīng)用程序都是用React構(gòu)建的，當(dāng)訪問者想要加載頁面時(shí)，每個(gè)應(yīng)用程序都必須下載依賴項(xiàng)，從而導(dǎo)致更高的下載大小。

例如，微前端React是這樣發(fā)生的：用戶在從一個(gè)頁面移動(dòng)到另一個(gè)頁面時(shí)，必須不止一次(多次)下載React——假設(shè)每個(gè)微前端都有一個(gè)React副本。這個(gè)主要的架構(gòu)概念可能會(huì)顯著影響加載時(shí)間，影響用戶體驗(yàn)和轉(zhuǎn)化率。

但是，在初始的快速加載速度下，單個(gè)頁面仍然可以加載得更快。也就是說，后續(xù)的導(dǎo)航將會(huì)變慢，因?yàn)楫?dāng)用戶從一個(gè)頁面移動(dòng)到另一個(gè)頁面時(shí)，必須重新加載相同的依賴項(xiàng)。

（2）環(huán)境差異：如果開發(fā)容器與生產(chǎn)容器不同，可能會(huì)造成災(zāi)難性后果。微前端架構(gòu)使開發(fā)人員能夠創(chuàng)建獨(dú)立的前端應(yīng)用程序，而不會(huì)受到其他開發(fā)團(tuán)隊(duì)正在構(gòu)建的微前端的阻礙。這種去中心化的方法使開發(fā)更快、更容易。

然而，在不同于生產(chǎn)環(huán)境的環(huán)境中進(jìn)行開發(fā)會(huì)帶來一個(gè)嚴(yán)重的問題。如果開發(fā)時(shí)間容器與生產(chǎn)容器不同，則微前端在部署到生產(chǎn)環(huán)境后將被破壞或表現(xiàn)不同。這個(gè)問題的一個(gè)關(guān)鍵敏感部分是全局樣式，它可能是容器或其他微前端的一部分。

其補(bǔ)救過程很簡單。當(dāng)在行為與生產(chǎn)環(huán)境不同的環(huán)境中進(jìn)行本地構(gòu)建時(shí)，建議定期將微前端集成并部署到類似生產(chǎn)的環(huán)境中。

此外，應(yīng)該定期進(jìn)行適當(dāng)?shù)臏y試，以確保及時(shí)發(fā)現(xiàn)和修復(fù)集成問題。這將顯著地減少這種潛在的權(quán)衡。開發(fā)人員需要為其打算使用微前端執(zhí)行的每個(gè)項(xiàng)目評估集成挑戰(zhàn)的風(fēng)險(xiǎn)。

（3）管理復(fù)雜性：微前端分散方法通常會(huì)導(dǎo)致難以管理的小團(tuán)隊(duì)和資源的復(fù)雜范圍。微前端需要處理更多的事情。根據(jù)項(xiàng)目的大小，將會(huì)有更多的存儲(chǔ)庫、工具、開發(fā)管道、服務(wù)器、域等等。

鑒于上述情況，在采用去中心化開發(fā)架構(gòu)之前，最好考慮一下處理它所帶來的責(zé)任。開發(fā)人員需要有足夠的自動(dòng)化，才能提供和應(yīng)對資源的激增。

當(dāng)涉及到管理開發(fā)過程時(shí)，使用微前端意味著有關(guān)工具和編碼最佳實(shí)踐的決策將更加分散，并且將不在中央管理的控制之下。調(diào)整微前端需要用戶適應(yīng)對重要決策過程控制較少的情況。

（4）合規(guī)性問題：在許多獨(dú)立的前端代碼庫之間保持一致性是很困難的。它需要優(yōu)秀的領(lǐng)導(dǎo)來確保質(zhì)量、一致性和治理在所有團(tuán)隊(duì)中得到維護(hù)。如果代碼審查和定期監(jiān)督?jīng)]有得到正確執(zhí)行，合規(guī)性問題必然會(huì)出現(xiàn)。

如何用React構(gòu)建微前端?

現(xiàn)在已經(jīng)介紹了微前端是什么，它是如何工作的，開發(fā)方法，優(yōu)點(diǎn)和缺點(diǎn)，現(xiàn)在是學(xué)習(xí)如何用React構(gòu)建微前端的時(shí)候了。

步驟1：創(chuàng)建三個(gè)模塊：主機(jī)、布局和頁面。

步驟2：從布局組件開始

步驟3：創(chuàng)建一些頁面

步驟4：把所有的構(gòu)成元素放到主機(jī)模塊中

步驟5：運(yùn)行這三個(gè)應(yīng)用程序，并在瀏覽器上分別試用。

在示例中，將使用一個(gè)食譜網(wǎng)站。覺得Click and Cook這個(gè)名字很酷嗎?

當(dāng)教如何構(gòu)建微前端時(shí)，將在create-mf-app的幫助下使用Webpack的模塊聯(lián)邦，以加快速度。

1.所涉及的步驟(將假設(shè)用戶使用Linux/MacOS)

步驟1：創(chuàng)建三個(gè)模塊：主機(jī)、布局和頁面。

（1）為項(xiàng)目創(chuàng)建目錄并進(jìn)入該目錄。

Mkdir micro-front -example && cd micro-front -example

（2）創(chuàng)建主機(jī)模塊。

（3）創(chuàng)建布局模塊。

（4）最后，創(chuàng)建頁面模塊。

步驟2：從布局組件開始(那些在所有頁面上共享的組件)。注：將使用Tailwind給組件一些風(fēng)格。

（1）創(chuàng)建Header組件。代碼如下：

（2）創(chuàng)建Footer組件。代碼如下：

（3）在webpack.config.js文件中公開這兩個(gè)組件。

步驟3：現(xiàn)在創(chuàng)建一些頁面

（1）需要一些路由，所以從在所有模塊上安裝React路由器開始。

npm install react-router-dom

（2）接下來，向JS/JSON文件中添加一些固定的食譜。

（3）現(xiàn)在，創(chuàng)建一個(gè)頁面來列出所有食譜。

（4）創(chuàng)建一個(gè)頁面來顯示單個(gè)配方的詳細(xì)信息。

（5）在webpack配置文件中顯示這兩個(gè)組件。

步驟4：把所有構(gòu)成元素放在Host模塊中。

（1）在主機(jī)模塊的webpack.config.js文件中添加Pages和Layout模塊。

（2）在將組件和路由添加到App.tsx中。

步驟5：運(yùn)行這三個(gè)應(yīng)用程序，并在瀏覽器上分別試用。

• 在每個(gè)模塊中運(yùn)行' npm start '命令，然后到localhost:3000測試結(jié)果!

注：要查看完整的示例，請?jiān)L問GitHub。

結(jié)論

微前端無疑是一種革命性的架構(gòu)，它解決了一些與單體前端應(yīng)用相關(guān)的問題。使用微前端，開發(fā)人員可以享受快速的開發(fā)過程、改進(jìn)的效率、增量升級、簡單的代碼庫、獨(dú)立部署、自治團(tuán)隊(duì)等等。

在采用微前端架構(gòu)之前，需要確保考慮自動(dòng)化需求、操作和治理復(fù)雜性、質(zhì)量、一致性和其他重要因素。

原文標(biāo)題：Micro-frontends Using React: The Complete Guide，作者：Alfonso Valdes