Configurer les dépendances partagées
Découvrez comment l’option shared de Module Federation permet aux applications hôtes et distantes de partager des bibliothèques comme React, en évitant les téléchargements en double et les conflits de versions.
Configurer les dépendances partagées est une leçon Micro Frontends Architecture with Module Federation gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Micro Frontends Architecture with Module Federation, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Apprends JavaScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 12
- Leçons
- 48
Questions Fréquemment Posées
La leçon « Configurer les dépendances partagées » est-elle gratuite ?
Oui — le texte complet de « Configurer les dépendances partagées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Micro Frontends Architecture with Module Federation, passe à CoddyKit PRO. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Configurer les dépendances partagées » ?
Découvrez comment l’option shared de Module Federation permet aux applications hôtes et distantes de partager des bibliothèques comme React, en évitant les téléchargements en double et les conflits d… Tu pratiques Micro Frontends Architecture with Module Federation avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Micro Frontends Architecture with Module Federation ?
Aucune expérience préalable n'est requise. Micro Frontends Architecture with Module Federation sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Configurer les dépendances partagées » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Micro Frontends Architecture with Module Federation ?
Oui. Chaque leçon Micro Frontends Architecture with Module Federation inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Révision des fondamentaux de Webpack
- Découvrir la fédération de modules
- Applications hôtes et distantes
- Configurer les dépendances partagées