Micro Frontends Architecture with Module Federation · Leçon

Dépendances partagées et gestion des versions

Dépendances partagées et gestion des versions 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.

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.

Questions Fréquemment Posées

La leçon « Dépendances partagées et gestion des versions » est-elle gratuite ?

Oui — le texte complet de « Dépendances partagées et gestion des versions » 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 « Dépendances partagées et gestion des versions » ?

Découvrez comment Module Federation partage des bibliothèques entre micro-frontends, comment fonctionnent les singletons et la négociation de versions, ainsi que les bonnes pratiques qui évitent les… 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 « Dépendances partagées et gestion des versions » ?

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

Monorepos ou polyrepos
Défis organisationnels et solutions
Avenir des micro-interfaces et de la fédération
Dépendances partagées et gestion des versions

← Retour à Micro Frontends Architecture with Module Federation