Mikrofrontendy: Module Federation
Użyje Pan/Pani Webpack Module Federation lub Vite Federation do podzielenia dużego frontendu na niezależnie wdrażane moduły zdalne używane przez aplikację powłoki.
Mikrofrontendy: Module Federation to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są mikrofrontendy?
To podział dużego frontendu na niezależnie rozwijane i wdrażane części — zazwyczaj po jednej na zespół lub domenę biznesową. Każda część może mieć własny framework, repozytorium, potok wdrażania, a nawet cały stos technologiczny. Aplikacja shell spaja je w czasie działania.
Dlaczego mikrofrontendy?
Organizacje z ponad 10 zespołami frontendowymi napotykają ograniczenia: wąskie gardło jednego repozytorium, długi czas budowania i kolidujące harmonogramy wydań. Mikrofrontendy pozwalają zespołom wdrażać niezależnie — kosztem większej złożoności architektury.
Module Federation — podstawowa technika
Webpack Module Federation (Webpack 5, a także Vite za pośrednictwem wtyczki) pozwala aplikacji shell importować w czasie działania kod z niezależnie wdrażanych aplikacji remote. Aplikacja remote udostępnia określone moduły, a aplikacja shell z nich korzysta.
Konfiguracja aplikacji remote
Aplikacja remote udostępnia swoje moduły za pomocą konfiguracji webpack.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Konfiguracja aplikacji shell (hosta)
Aplikacja shell deklaruje, które aplikacje remote importuje.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Importowanie modułów remote
Należy użyć dynamic import — webpack rozwiąże import za pośrednictwem środowiska uruchomieniowego federation.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Federacja w Vite
Vite obsługuje Module Federation za pośrednictwem wtyczki @originjs/vite-plugin-federation — interfejs API jest podobny.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Współdzielone zależności
Należy umieścić biblioteki takie jak React w shared, aby nie były bundlowane dwukrotnie. Środowisko uruchomieniowe federation wybiera w czasie działania najwyższą zgodną wersję.
Niezależne wdrażanie
Każda aplikacja remote ma własny potok budowania i wdrażania. Aplikacja shell wskazuje adres URL — wypchnięcie nowej wersji aplikacji remote automatycznie udostępnia ją wszystkim konsumentom.
Komunikacja między aplikacjami
Nie należy współdzielić stanu za pomocą bezpośrednich importów — należy użyć zdarzeń (CustomEvent), niewielkiego współdzielonego busa lub postMessage. Należy zachować wyraźne granice, aby utrzymać niezależność aplikacji.
Alternatywy: iframe’y i Web Components
iframe’y: najsilniejsza izolacja, ale niewygodna nawigacja i obsługa CSS. Web Components: natywna obsługa w przeglądarce, brak uzależnienia od konkretnego frameworka, ale ograniczone współdzielenie stanu. Module Federation równoważy izolację z wygodą pracy deweloperów.
Kompromisy
Zalety: niezależne wdrażanie, swoboda wyboru technologii, autonomia zespołów. Koszty: złożona konfiguracja procesu budowania, konflikty współdzielonych zależności, trudne do debugowania błędy w czasie działania i większa złożoność bundla. Ma to sens tylko w naprawdę dużych organizacjach.
Kiedy unikać
Projekty realizowane przez jeden zespół, MVP i witryny, przy których frontendzie pracuje mniej niż 100 osób. Podatek od złożoności jest realny — większość zespołów powinna zamiast tego użyć monorepo.
Szybkie sprawdzenie
Co umożliwia Webpack Module Federation w architekturze mikrofrontendów?
Podsumowanie: mikrofrontendy
Podział frontendu według zespołów lub domen umożliwia niezależne wdrażanie. Module Federation (webpack 5 / wtyczka Vite) — shell importuje moduły z remote’ów w czasie działania. Remote udostępnia moduły, a shell deklaruje remote’y; oba współdzielą zależności, takie jak react. Do komunikacji między aplikacjami należy używać zdarzeń. To rozwiązanie jest złożone — należy je rezerwować dla naprawdę dużych organizacji.
Często zadawane pytania
Czy lekcja „Mikrofrontendy: Module Federation” jest bezpłatna?
Tak — pełny tekst „Mikrofrontendy: Module Federation” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Mikrofrontendy: Module Federation”?
Użyje Pan/Pani Webpack Module Federation lub Vite Federation do podzielenia dużego frontendu na niezależnie wdrażane moduły zdalne używane przez aplikację powłoki. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Mikrofrontendy: Module Federation”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atomic Design: atomy, molekuły i organizmy
- Konfiguracja monorepo z Turborepo
- Mikrofrontendy: Module Federation
- Struktura folderów według funkcji