譯者 | 李睿

審校 | 重樓

事實表明，前端開發伴隨著許多挑戰。而尋找簡化開發過程和加快任務執行的方法是每個開發團隊的目標。在開發大型復雜產品時，讓開發團隊成員在任務上進行協作是非常困難的。值得慶幸的是，微前端為應對這些提供了解決方案。

微前端需要將前端單體拆分為幾個更小、更容易管理的部分。這種開發架構非常重要，因為它可以提高開發人員處理前端代碼的效率。本文將探討React中的微前端是什么，以及微前端的優點和缺點、實現選項和微前端架構。還將提供示例，以幫助開發人員在實際層面上掌握所有內容。

什么是微前端?

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

這些組件可以由不同的團隊使用不同的技術來構建。微前端的架構類似于后端，后端是使用半獨立的微服務構建的。

多年來，微前端逐漸在開發領域得到普及和接受。就像后端的微服務一樣，每個應用程序（在微前端）都是單獨存在的，具有定義明確的功能或目標。

例如，一個典型的網站有主頁、“關于我們”的頁面、服務頁面、結帳頁面、付款頁面等等。根據微前端的概念，每個頁面都可以作為一個獨立的應用程序開發。

軟件開發團隊也可以分為專門的團隊。因此，一個開發團隊可以負責編寫主頁，而另一個開發團隊負責編寫服務頁面，以此類推。

這種方法有很多優點。微前端架構旨在幫助工程師克服當前SPA前端開發的挑戰。

使用這種最新的前端開發方法，開發人員可以簡化任務，鼓勵協作，提高過程的效率，并顯著提高生產力。

微前端的簡史

微服務在軟件架構師于2011年舉辦的一個活動中得到了解釋。微服務在當時是許多公司都在嘗試的一種開發風格。隨著時間的推移，微服務作為一種后端開發架構的優勢變得越來越成功。

出于進化的目的，軟件及咨詢機構Thought Works公司在2016年11月提出了“微前端”這個術語，這是一種類似于微服務的前端架構。因此，很多企業開始嘗試使用新架構創建前端的框架。

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

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

如何開發微前端?

在定義了微前端及了解其簡要歷史之后，現在探索開發微前端的不同方法。開發人員可以使用以下三種方法構建微前端：

• 使用模塊聯邦
• 使用Web組件
• 采用IFrames

1.模塊聯邦

模塊聯邦是Webpack 5的一個插件，能夠開發各種不依賴于彼此的功能。因此，它們可以單獨建造和推出。使用該插件，開發商可以快速創建多個函數來組成單個產品。

（1）是什么讓模塊聯邦變得有趣?

模塊聯邦的一些功能可以滿足開發人員的開發需求。以下是開發人員應該使用它的原因：

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

（2）模塊聯邦配置

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

• 名稱：這里指暴露容器的的專有名稱。即在容器插件時輸入的名稱，被模塊聯邦使用，成為容器的相對路徑。
• 庫：庫決定了如何存儲和訪問公開的代碼。庫函數允許開發人員進一步配置，以確定名稱和類型。
• 文件名：這是輸出包的文件名。此外，它還可以作為捆綁包的入口點。
• 遠程：遠程配置選項與靜態遠程模塊列表有關。本地模塊可以訪問這些遠端模塊。
• 共享：這個配置選項允許開發人員共享其節點庫。該選項還提供了一系列配置函數，使開發人員能夠確定如何共享庫。

還需要了解其他Webpack配置功能，包括輸出、實驗和優化。為了能夠正確開發具有模塊聯合的微型前端，有必要對這些配置選項有充分的了解。

2. Web組件

Web組件是低級瀏覽器應用程序編程接口，它使開發人員能夠使用新組件擴展瀏覽器。此外，Web組件為定義或確定新組件提供了一個標準接口。

這個工具對于當前的Web設計和開發非常有用，因為開發人員可以利用組件來容納用戶界面功能。使用Web組件，可以開發利用其他前端框架使用的HTML和DOM API的組件。

這個實現很有趣，因為開發人員可以在不失去互操作性的情況下享受開發自己組件的靈活性。一旦構建了一個Web組件，就可以把它應用到各種各樣的應用程序中，因為Web組件在任何地方都有功能。

Web組件的三個主要概念

開發人員需要理解Web組件的三個概念：

（1）自定義元素：這些JS API使開發人員能夠構建自定義HTML元素。在開發自己的HTML元素時，可以準確地規定它們的行為方式。

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

（3）HTML模板：這些HTML標簽可以用來為組件構建模板。

3.IFrames

IFrames允許開發人員實現微前端。基本上，IFrames是可以合并到另一個HTML文檔中的HTML文檔。IFrames之所以受到歡迎，是因為它可以很容易地從獨立的子頁面中開發出一個主頁。當涉及到樣式和全局變量不相互影響時，IFrames提供了合理的隔離級別。

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

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

微前端的好處和權衡

微前端是一種新的前端架構，它解決了傳統的單體前端架構帶來的一些主要問題。以下了解微前端的優點和缺點。

1.微前端的優點

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

這種方法使團隊能夠對依賴項、用戶體驗、加載速度、體系結構等應用增量升級。開發團隊可以簡化他們的工作，專注于產品的特定部分。這為新技術的全面決策和高質量實施創造了一個平臺，而不是必須接近一個龐大而繁瑣的前端應用程序。

（2）簡單的代碼庫：開發人員面臨的挑戰之一是復雜的代碼庫。處理復雜的代碼庫本身就是開發人員的一項工作，因為需要格外小心，以避免混淆。開發人員可以用一個微前端把這些都放在過去。這種新方法將事情分解成不同的、更小的代碼庫，從而為開發人員提供所需的簡單性和最佳的清晰度。

在默認情況下，每個前端應用程序的代碼將比單體代碼更小。因此，它更容易使用。除了提供整潔的代碼庫之外，還在組件之間設置了適當的邊界。因此，開發人員在試圖修復錯誤或更改代碼時不太可能感到困惑或沮喪。

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

獨立部署的能力使開發人員能夠更快地發布特性。例如，當使用單體前端應用程序時，必須等到完成應用更改后才能部署。使用微前端方法，產品的單獨部分不會阻止開發人員部署已準備好的部分。

（4）自治團隊：微前端的模塊化允許專注于產品的特定部分。如果有一個較大的團隊，可以通過將團隊分成小組來提高效率。每組開發人員將負責產品的給定部分，從而提高關注度，使工程師能夠以最高效率構建特定功能。

除了鼓勵專業化和提高交付代碼的質量之外，團隊管理和協作也得到了加強。此外，當團隊規模較小時，更容易知道誰在做什么。

開發團隊負責人還會發現，與規模更大的團隊相比，任務分配和監控變得更加容易。總的來說，自主的小團隊創造了一個促進協作和技能轉移的舒適空間。

（5）技術不可知論：微前端允許開發人員將每個應用程序作為一個模塊進行維護，并將它們與其他模塊分開。因此，可以使用不同的技術、框架或庫來開發每個應用程序。多樣化開發技術或框架的能力允許開發人員使用最好的工具構建健壯的產品。

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

2.微前端與React的權衡

（1）更大的下載大小：重復的依賴關系是微前端導致更大的下載大小的原因。考慮到每個應用程序都是用React構建的，當訪問者想要加載頁面時，每個應用程序都必須下載依賴項，從而導致更高的下載大小。

例如，微前端React是這樣發生的：用戶在從一個頁面移動到另一個頁面時，必須不止一次(多次)下載React——假設每個微前端都有一個React副本。這個主要的架構概念可能會顯著影響加載時間，影響用戶體驗和轉化率。

但是，在初始的快速加載速度下，單個頁面仍然可以加載得更快。也就是說，后續的導航將會變慢，因為當用戶從一個頁面移動到另一個頁面時，必須重新加載相同的依賴項。

（2）環境差異：如果開發容器與生產容器不同，可能會造成災難性后果。微前端架構使開發人員能夠創建獨立的前端應用程序，而不會受到其他開發團隊正在構建的微前端的阻礙。這種去中心化的方法使開發更快、更容易。

然而，在不同于生產環境的環境中進行開發會帶來一個嚴重的問題。如果開發時間容器與生產容器不同，則微前端在部署到生產環境后將被破壞或表現不同。這個問題的一個關鍵敏感部分是全局樣式，它可能是容器或其他微前端的一部分。

其補救過程很簡單。當在行為與生產環境不同的環境中進行本地構建時，建議定期將微前端集成并部署到類似生產的環境中。

此外，應該定期進行適當的測試，以確保及時發現和修復集成問題。這將顯著地減少這種潛在的權衡。開發人員需要為其打算使用微前端執行的每個項目評估集成挑戰的風險。

（3）管理復雜性：微前端分散方法通常會導致難以管理的小團隊和資源的復雜范圍。微前端需要處理更多的事情。根據項目的大小，將會有更多的存儲庫、工具、開發管道、服務器、域等等。

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

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

（4）合規性問題：在許多獨立的前端代碼庫之間保持一致性是很困難的。它需要優秀的領導來確保質量、一致性和治理在所有團隊中得到維護。如果代碼審查和定期監督沒有得到正確執行，合規性問題必然會出現。

如何用React構建微前端?

現在已經介紹了微前端是什么，它是如何工作的，開發方法，優點和缺點，現在是學習如何用React構建微前端的時候了。

步驟1：創建三個模塊：主機、布局和頁面。

步驟2：從布局組件開始

步驟3：創建一些頁面

步驟4：把所有的構成元素放到主機模塊中

步驟5：運行這三個應用程序，并在瀏覽器上分別試用。

在示例中，將使用一個食譜網站。覺得Click and Cook這個名字很酷嗎?

當教如何構建微前端時，將在create-mf-app的幫助下使用Webpack的模塊聯邦，以加快速度。

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

步驟1：創建三個模塊：主機、布局和頁面。

（1）為項目創建目錄并進入該目錄。

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

（2）創建主機模塊。

（3）創建布局模塊。

（4）最后，創建頁面模塊。

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

（1）創建Header組件。代碼如下：

（2）創建Footer組件。代碼如下：

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

步驟3：現在創建一些頁面

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

npm install react-router-dom

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

（3）現在，創建一個頁面來列出所有食譜。

（4）創建一個頁面來顯示單個配方的詳細信息。

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

步驟4：把所有構成元素放在Host模塊中。

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

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

步驟5：運行這三個應用程序，并在瀏覽器上分別試用。

• 在每個模塊中運行' npm start '命令，然后到localhost:3000測試結果!

注：要查看完整的示例，請訪問GitHub。

結論

微前端無疑是一種革命性的架構，它解決了一些與單體前端應用相關的問題。使用微前端，開發人員可以享受快速的開發過程、改進的效率、增量升級、簡單的代碼庫、獨立部署、自治團隊等等。

在采用微前端架構之前，需要確保考慮自動化需求、操作和治理復雜性、質量、一致性和其他重要因素。

原文標題：Micro-frontends Using React: The Complete Guide，作者：Alfonso Valdes