0Pricing
Micro Frontends Architecture with Module Federation · Lekcja

Współdzielone zależności i zarządzanie wersjami

Dowiedz się, jak Module Federation współdzieli biblioteki między micro frontendami, jak działają singletony i negocjowanie wersji oraz jakie praktyki zapobiegają duplikowaniu pakietów i awariom w czasie działania.

Współdzielone zależności i zarządzanie wersjami to bezpłatna lekcja Micro Frontends Architecture with Module Federation na CoddyKit. To lekcja 4 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 Micro Frontends Architecture with Module Federation, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Why Sharing Matters

In a Module Federation setup every remote can bundle its own copy of react, react-dom, or a design system. Without coordination, a single page may load three copies of React.

Shared dependencies let independently deployed apps agree on a single instance of a library at runtime, cutting payload and avoiding state bugs.

The shared Key

Both host and remotes declare a shared block in their ModuleFederationPlugin config. Webpack then negotiates which version actually loads.

new ModuleFederationPlugin({
  name: 'host',
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

Singletons Explained

singleton: true forces one and only one copy across the whole app. This is essential for libraries that hold internal state, like React (hooks) or a router.

Without it, two React instances cause the dreaded Invalid hook call error.

Version Negotiation

Each shared module declares a requiredVersion. At load time Module Federation picks the highest compatible version among all that are offered.

shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.2.0'
  }
}

Strict Version Mismatch

When a remote needs a version incompatible with the loaded singleton, Module Federation logs a warning and uses the existing one. With strictVersion: true it instead throws, surfacing the mismatch early.

shared: {
  react: { singleton: true, strictVersion: true, requiredVersion: '18.2.0' }
}

Eager vs Lazy Sharing

By default shared modules load asynchronously, which requires a bootstrap entry. Setting eager: true bundles the dependency into the initial chunk so no async boundary is needed.

Use eager only for the host shell; eager everywhere defeats the purpose of sharing.

shared: {
  react: { singleton: true, eager: true }
}

The bootstrap Pattern

Because shared modules resolve asynchronously, the standard pattern splits the entry into index.js (just an import) and bootstrap.js (the real app). This defers execution until the share scope is ready.

// index.js
import('./bootstrap');

// bootstrap.js
import App from './App';
// ... mount App

Sharing a Design System

A shared component library should usually be a singleton too, so theming context and CSS-in-JS instances are not duplicated.

shared: {
  '@acme/ui': { singleton: true, requiredVersion: '^3.0.0' }
}

Auto-Sharing from package.json

Instead of listing versions by hand, you can pass an array and let the plugin read versions from package.json. Tools like the Module Federation Enhanced plugin can even auto-share all dependencies.

shared: ['react', 'react-dom', 'react-router-dom']

Diagnosing Duplicate Copies

To confirm sharing works, inspect the Network tab: you should see one vendor chunk for the shared lib. Bundle analyzers and the runtime share scope (__webpack_share_scopes__.default) help debug.

Best Practices Summary

  • Singleton for stateful libs (React, router, stores).
  • Set requiredVersion to align teams.
  • Keep eager only on the host shell.
  • Audit bundles regularly for accidental duplicates.

Quick Check

Which option ensures only one instance of React loads across all micro frontends?

Recap

You learned how Module Federation shares dependencies: singletons for stateful libs, version negotiation via requiredVersion/strictVersion, eager vs lazy loading, and the bootstrap pattern. Proper sharing slashes bundle size and prevents subtle runtime bugs.

Często zadawane pytania

Czy lekcja „Współdzielone zależności i zarządzanie wersjami” jest bezpłatna?

Tak — pełny tekst „Współdzielone zależności i zarządzanie wersjami” 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 Micro Frontends Architecture with Module Federation, przejdź na CoddyKit PRO. Kurs Micro Frontends Architecture with Module Federation zawiera 4 lekcji w sumie.

Co nauczysz się w „Współdzielone zależności i zarządzanie wersjami”?

Dowiedz się, jak Module Federation współdzieli biblioteki między micro frontendami, jak działają singletony i negocjowanie wersji oraz jakie praktyki zapobiegają duplikowaniu pakietów i awariom w cza… Ćwiczysz Micro Frontends Architecture with Module Federation 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ąć Micro Frontends Architecture with Module Federation?

Nie wymagamy żadnego doświadczenia. Micro Frontends Architecture with Module Federation 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 4 z 4.

Ile czasu zajmuje lekcja „Współdzielone zależności i zarządzanie wersjami”?

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 Micro Frontends Architecture with Module Federation?

Tak. Każda lekcja Micro Frontends Architecture with Module Federation 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

  1. Monorepo a polyrepo
  2. Wyzwania organizacyjne i rozwiązania
  3. Przyszłość Micro Frontends i federacji
  4. Współdzielone zależności i zarządzanie wersjami
← Powrót do Micro Frontends Architecture with Module Federation