Micro-frontends : fédération de modules
Utilisez Webpack Module Federation ou Vite Federation pour diviser un grand frontend en modules distants déployés indépendamment et consommés par une application hôte.
Micro-frontends : fédération de modules est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les micro-interfaces
Division d’une grande interface frontale en éléments développés et déployés indépendamment — généralement un par équipe ou domaine métier. Chaque élément peut avoir son propre framework, dépôt, chaîne de déploiement et même sa propre pile technologique. Une application hôte les assemble à l’exécution.
Pourquoi utiliser des micro-interfaces
Les organisations comptant plus de 10 équipes d’interface atteignent certaines limites : goulot d’étranglement du dépôt unique, temps de compilation longs et calendriers de mise en production incompatibles. Les micro-interfaces permettent aux équipes de publier indépendamment, au prix d’une plus grande complexité architecturale.
Fédération de modules — technique centrale
Fédération de modules Webpack (Webpack 5, également disponible avec Vite via un module d’extension) permet à une application hôte d’importer à l’exécution du code provenant de modules distants déployés indépendamment. Le module distant expose certains modules ; l’application hôte les utilise.
Configuration du module distant
L’application distante expose ses modules via la configuration 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']
})
]
};Configuration de l’application hôte
L’application hôte déclare les modules distants qu’elle importe.
// 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']
})
]
};Importer des modules distants
Utilisez une importation dynamique — webpack la résout via l’environnement d’exécution de la fédération.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Fédération avec Vite
Vite prend en charge la fédération de modules via le module d’extension @originjs/vite-plugin-federation — l’API est similaire.
// 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']
})]
};Dépendances partagées
Répertoriez les bibliothèques comme React dans shared afin qu’elles ne soient pas regroupées deux fois. L’environnement d’exécution de la fédération sélectionne la version compatible la plus élevée à l’exécution.
Déploiement indépendant
Chaque module distant possède sa propre chaîne de compilation et de déploiement. L’application hôte pointe vers une URL : publier un nouveau module distant le déploie automatiquement chez tous les consommateurs.
Communication entre les applications
Ne partagez pas l’état via des importations directes — utilisez des événements (CustomEvent), un petit bus partagé ou postMessage. Préservez des frontières nettes afin de conserver l’indépendance.
Alternatives : cadres intégrés et Web Components
Cadres intégrés : isolation maximale, navigation et CSS peu pratiques. Web Components : prise en charge native par le navigateur, sans dépendance à un cadre logiciel, mais avec un état partagé limité. Module Federation équilibre isolation et expérience de développement.
Compromis
Avantages : déploiements indépendants, liberté technologique, autonomie des équipes. Coûts : configuration de compilation complexe, conflits entre dépendances partagées, erreurs à l'exécution difficiles à déboguer, complexité accrue des paquets. Cela n'est rentable que pour les organisations réellement importantes.
Quand l'éviter
Projets menés par une seule équipe, MVP, sites dont l'équipe d'interface compte moins de 100 personnes. Le coût de la complexité est bien réel — la plupart des équipes devraient plutôt utiliser un monorepo.
Vérification rapide
Qu'est-ce que Webpack Module Federation permet de faire dans une architecture à micro-interfaces ?
Récapitulatif : micro-interfaces
Divisez l'interface par équipe ou domaine pour permettre des déploiements indépendants. Module Federation (webpack 5 / extension Vite) — le shell importe les modules des remotes à l'exécution. Un remote expose des modules ; le shell déclare les remotes ; les deux partagent des dépendances comme React. Utilisez des événements pour la communication entre applications. C'est complexe — réservez cette approche aux organisations réellement importantes.
Questions Fréquemment Posées
La leçon « Micro-frontends : fédération de modules » est-elle gratuite ?
Oui — le texte complet de « Micro-frontends : fédération de modules » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Micro-frontends : fédération de modules » ?
Utilisez Webpack Module Federation ou Vite Federation pour diviser un grand frontend en modules distants déployés indépendamment et consommés par une application hôte. Tu pratiques Frontend Academy 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy 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 3 sur 4.
Combien de temps prend la leçon « Micro-frontends : fédération de modules » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend Academy 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
- Design atomique : atomes, molécules et organismes
- Configuration d’un monorepo avec Turborepo
- Micro-frontends : fédération de modules
- Structure de dossiers par fonctionnalité