Konfigurowanie współdzielonych zależności
Dowiedz się, jak opcja shared w Module Federation pozwala aplikacjom hosta i zdalnym współdzielić biblioteki, takie jak React, unikając duplikowania pobrań i konfliktów wersji.
Konfigurowanie współdzielonych zależności 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.
The Duplication Problem
Without coordination, a host and each remote would each bundle their own copy of React, Lodash, and other libraries. Users would download the same code many times.
The shared option solves this.
What shared Does
The shared key in ModuleFederationPlugin tells webpack which dependencies should be loaded once and reused across federated apps at run time.
Basic shared Syntax
The simplest form lists package names as an array. Webpack then negotiates a single shared instance at run time.
new ModuleFederationPlugin({
name: "host",
shared: ["react", "react-dom"]
});Object Form for Options
The object form gives fine-grained control per dependency, such as marking it required or singleton.
shared: {
react: { singleton: true, requiredVersion: "^18.0.0" },
"react-dom": { singleton: true }
}The singleton Option
singleton: true forces every app to use ONE instance of the library. This is essential for React, whose hooks break if two copies load at once.
requiredVersion and Negotiation
Each app declares a requiredVersion. At run time Module Federation picks the highest version that satisfies everyone. If versions are incompatible, it warns or falls back.
shared: {
react: { singleton: true, requiredVersion: "^18.2.0" }
}The eager Option
eager: true bundles the shared dependency into the initial chunk instead of loading it asynchronously. Useful for the host shell but increases initial bundle size.
shared: {
react: { singleton: true, eager: true }
}Reading from package.json
To avoid hardcoding versions, you can derive them from your dependencies, keeping shared config in sync with what you actually install.
const deps = require("./package.json").dependencies;
shared: {
react: { singleton: true, requiredVersion: deps.react }
}strictVersion
strictVersion: true makes Module Federation throw instead of falling back when no compatible version is found — surfacing mismatches early during testing.
Common Pitfalls
Watch out for:
- Forgetting
singletonon React, causing hook errors - Mismatched major versions across remotes
- Overusing
eager, bloating the first load
Verifying Sharing Works
Open the browser network tab: if React loads only once across host and remotes, sharing is working. The webpack build log also reports shared-module resolution.
Quick Check
Test your shared-dependency knowledge.
Recap
You configured shared dependencies:
sharedavoids duplicate libraries across apps- Use the object form for per-package control
singletonis critical for React and React-DOMrequiredVersiondrives run-time negotiation- Use
eagerandstrictVersiondeliberately
Good sharing keeps federated apps fast and conflict-free.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 12
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „Konfigurowanie współdzielonych zależności” jest bezpłatna?
Tak — pełny tekst „Konfigurowanie współdzielonych zależności” 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 „Konfigurowanie współdzielonych zależności”?
Dowiedz się, jak opcja shared w Module Federation pozwala aplikacjom hosta i zdalnym współdzielić biblioteki, takie jak React, unikając duplikowania pobrań i konfliktów wersji. Ć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 „Konfigurowanie współdzielonych zależności”?
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
- Powtórzenie podstaw Webpack
- Wprowadzenie do Module Federation
- Aplikacje hosta i zdalne
- Konfigurowanie współdzielonych zależności