簡介
建立微前端應用程式的方法有很多種。每種方法都有其自身的權衡。本文深入探討了每種策略並幫助您選擇正確的策略。
1. 建置時整合（NPM 套件）
每個 MFE 都會發佈為 npm 套件，並在建置時匯入主機應用程式：
host-app/package.json:
"@company/product-mfe": "^2.1.0"
"@company/cart-mfe": "^1.3.0"
優點： 簡單、型別安全、可搖樹 缺點： MFE 更新時必須重建 + 重新部署主機應用程式 結論： ❌ 不是「真正的」微前端－沒有獨立部署
2. 運行時集成
2.1 iframe
<iframe src="https://product.example.com/embed" />
**優點：**完美隔離，簡單 **缺點：**沒有共享樣式，難以溝通，SEO糟糕，性能差 用例： 遺留應用程式嵌入、沙盒小部件
2.2 Web 元件
<product-catalog data-category="electronics"></product-catalog>
<script src="https://product.cdn.com/product-catalog.js"></script>
優點： 框架無關、Shadow DOM 隔離、瀏覽器標準 缺點： 複雜的 SSR、需要 React 包裝器、Shadow DOM 樣式棘手
2.3 JavaScript 整合（動態腳本載入）
function loadMicroFrontend(name, containerId) {
const script = document.createElement('script');
script.src = `https://${name}.cdn.com/bundle.js`;
script.onload = () => {
window[`render_${name}`](document.getElementById(containerId));
};
document.body.appendChild(script);
}
優點： 簡單、靈活、不可知的框架 缺點： 無依賴共享，捆綁包大
2.4 模組聯盟 (Webpack 5) ⭐
┌─────────────────────────────┐
│ Shell App (Host) │
│ │
│ import('product/Catalog') │──► Product MFE (Remote)
│ import('cart/MiniCart') │──► Cart MFE (Remote)
│ │
│ Shared: React, React-DOM │
│ (loaded once, shared) │
└─────────────────────────────┘
優點： 執行時期整合、共享依賴項、延遲載入、TypeScript 缺點： Webpack 特定的，學習曲線 結論： ⭐ 對於大多數用例推薦。
3. 伺服器端方法
3.1 伺服器端包含 (SSI)
<!--# include virtual="/fragments/product?id=123" -->
3.2 邊緣包含 (ESI)
<esi:include src="https://product.service/fragment/header" />
用例： 內容豐富的頁面，當 SEO 和 TTFB 很重要時。
4.決策矩陣
| 戰略 | 獨立 | 性能 | 複雜性 | 最適合 |
|---|---|---|---|---|
| NPM 套件 | ❌低 | ✅ 最好 | 低 | 共享庫 |
| iframe | ✅ 高 | ❌ 窮 | 低 | 傳統嵌入式 |
| 網頁組件 | ✅ 高 | ✅ 好 | 中 | 多框架 |
| JS 整合 | ✅ 高 | ⚠️ 好的 | 中等 | 簡單案例 |
| 模組聯盟 | ✅ 高 | ✅ 好 | 中 | 大多數專案 |
| SSI/ESI | ✅ 高 | ✅ 很棒的 TTFB | 高 | 內容網站 |
總結
- 建置時 (npm)：簡單但沒有獨立部署
- 模組聯盟：同一框架的最佳平衡 - ⭐推薦
- Web 元件：最適合多框架
- SSI/ESI：最適合伺服器呈現的內容網站