

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 管理交叉切割問題的相依性
<a name="manage-dependencies"></a>

有意識的相依性管理對於微型前端等分散式架構的成功至關重要。相依性管理是微型前端開發中最具挑戰性的部分之一。

在微型前端架構中，相依性管理的兩個重要方面是將大型程式碼成品轉移到用戶端時的效能損失，以及運算資源中的額外負荷。在理想情況下，您的組織需要強制維護分散式前端架構中的相依性。

使用匯入映射和*模組聯合*等 Web 標準，管理相依性維護的三個可行策略*不共享*。其他方法是反模式，因為它們違反分散式架構的基本原則。

## 盡可能不共用任何內容
<a name="share-nothing"></a>

共用沒有方法會假設獨立軟體成品之間完全不應共用相依性，或至少不應在整合或執行時間共用。這表示如果兩個微型前端依賴相同的程式庫，則每個 都必須在建置時在程式庫中製作並單獨運送。此外，每個微型前端都必須驗證程式庫不會污染全域命名空間和共用資源。

這會導致備援，但這是有意識的權衡，具有最大的敏捷性。沒有共用執行時間相依性的情況下，只要團隊在其解決方案範圍內這樣做，並且不違反任何界面合約，團隊就能夠以他們認為有用的任何方式發展軟體。

在微型前端遵循共用原則的平台上，請務必盡可能輕量化微型前端。它需要熟練且努力最佳化微型前端以獲得效能的開發人員，以及不犧牲使用者體驗以獲得開發人員體驗的開發人員。

## 當您共用程式碼時
<a name="share-code"></a>

當您決定共享一些程式碼時，您可以將它共享為程式庫或執行時間模組。例如，前端核心團隊透過 CDNs 提供用於微型前端耗用的程式庫。商業價值團隊可以在執行時間載入程式庫，也可以使用套件儲存庫來發佈其程式庫。微型前端團隊可以在建置時根據特定版本的封裝程式庫進行開發，類似於使用混合架構的行動應用程式。

第三個選項是使用私有套件登錄檔來支援常見程式庫的建置時間整合。這可降低程式庫合約中重大變更在執行時間啟動錯誤的風險。不過，這種更保守的方法需要更多的控管，才能將所有微型前端與較新的程式庫版本同步。

為了改善頁面載入時間，微型前端可以將要從 Amazon CloudFront 等 CDN 快取區塊載入的程式庫相依性外部化。

為了管理執行時間相依性，微型前端可以使用 import-maps （或程式庫，例如 `System.js`) 來指定每個模組在執行時間載入的位置。Webpack Module Federation 是指向遠端模組託管版本的另一種方法，並解決獨立微型前端之間的常見相依性。

另一種方法是透過對[探索端點](https://github.com/awslabs/frontend-discovery)的初始請求，促進匯入映射的動態載入。

## 共用狀態
<a name="shared-state"></a>

為了減少微型前端的耦合，請務必避免從相同檢視中的所有微型前端存取全域狀態管理，類似於單體架構。例如，讓可從所有微型前端存取的全域 Redux 存放區會增加耦合。

消除共用狀態的模式是將其封裝在微型前端中，並與先前討論的非同步訊息通訊。

絕對必要時，請引入明確定義的全域狀態界面，並選擇唯讀共用以避免意外行為：
+ 當存在垂直分割時，您可以使用 URL 元件和瀏覽器儲存體從主機環境存取資訊。
+ 當您有混合分割時，您也可以使用 DOM 標準自訂事件或 JavaScript 程式庫，例如事件發射器或雙向串流，將資訊傳遞給微型前端。

如果您需要跨微型前端共用數個資訊，建議您重新檢視微型前端界限。共享的需求可能是由業務發展或低階初始設計所造成。

您也可以使用伺服器端工作階段，其中每個微型前端都會使用工作階段識別符擷取所需的資料。若要減少耦合，請務必消除共用狀態，並將微型前端特定工作階段資料分開。