はじめに
マイクロ フロントエンド アプリケーションを作成するには、さまざまな方法があります。各アプローチには独自のトレードオフがあります。この記事では、各戦略を詳しく説明し、適切な戦略を選択するのに役立ちます。
1. ビルド時の統合 (NPM パッケージ)
各 MFE は npm パッケージとして公開され、ホスト アプリはビルド時にインポートされます。
host-app/package.json:
"@company/product-mfe": "^2.1.0"
"@company/cart-mfe": "^1.3.0"
利点: シンプル、タイプセーフ、ツリーシェイク可能 欠点: MFE の更新時にホスト アプリを再構築および再デプロイする必要がある 評決: ❌ 「実際には」Micro Frontend ではない - 独立した展開はありません
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パッケージ | ❌ 低い | ✅ ベスト | 低い | 共有ライブラリ |
| iフレーム | ✅ 高 | ❌ 悪い | 低い | レガシー組み込み |
| Web コンポーネント | ✅ 高 | ✅ 良い | 中 | マルチフレームワーク |
| JS の統合 | ✅ 高 | ⚠️ わかりました | 中 | 単純なケース |
| モジュールフェデレーション | ✅ 高 | ✅ 良い | 中 | ほとんどのプロジェクト |
| SSI/ESI | ✅ 高 | ✅ 素晴らしい TTFB | 高 | コンテンツ サイト |
概要
- ビルド時間 (npm): シンプルですが、独立したデプロイメントはありません
- モジュールフェデレーション: 同じフレームワークの最適なバランス — ⭐推奨
- Web コンポーネント: マルチフレームワークに最適
- SSI/ESI: サーバーレンダリングのコンテンツサイトに最適