Micro Frontends avec fédération de modules : Guide pratique

Les Micro Frontends divisent une application monolithique en parties plus petites, chacune développée, testée et déployée indépendamment. La Fédération de modules de Webpack 5 fournit l'infrastructure nécessaire pour que différentes versions puissent partager des modules au moment de l'exécution, permettant ainsi aux équipes de travailler de manière découplée.

Pourquoi adopter les Micro Frontends ?

Évolutivité organisationnelle, les équipes peuvent fournir des fonctionnalités de manière autonome.
Déploiement indépendant, les mises à jour d'un module ne nécessitent pas de reconstruire l'intégralité de l'application.
Réutilisation des composants, les bibliothèques partagées ne sont chargées qu'une seule fois.
Performance, le chargement à la demande (chargement paresseux) réduit la taille initiale du bundle.

Concepts clés de la fédération de modules

Concepts	Descriptif
Hôte	Application qui consomme des modules distants.
À distance	Application qui expose les modules via `exposes`.
Partagé	Dépendances (React, lodash) chargées une fois.
Télécommandes dynamiques	Chargement des télécommandes au moment de l'exécution via `import()`.

Configuration de base (Webpack), 5 lignes

// host/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'host',
    remotes: { remote: 'remote@https://example.com/remoteEntry.js' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

// remote/webpack.config.js
module.exports = {
  plugins: [new ModuleFederationPlugin({
    name: 'remote',
    filename: 'remoteEntry.js',
    exposes: { './Button': './src/Button' },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } }
  })]
};

Chaque application possède son propre webpack.config.js ; l'hôte importe le module distant en tant que remote/Button.

Consommation du module distant (React), 3 lignes

import React, { Suspense } from 'react';
const RemoteButton = React.lazy(() => import('remote/Button'));
export default () => <Suspense fallback="Carregando…"><RemoteButton /></Suspense>;

React.lazy garantit le chargement paresseux du composant distant, réduisant ainsi le bundle initial.

Stratégies de gestion des versions des dépendances

Singleton, garantit qu'une seule copie de React est chargée.
Version stricte, utilisez requiredVersion pour éviter les incompatibilités.
Retour, configurez fallback: 'path/to/local/react' si la télécommande tombe en panne.

Déploiement et CI/CD

Build séparée, chaque micro-frontend a son propre pipeline (npm run build).
Publication, téléchargez les ressources (remoteEntry.js, bundles) sur un CDN.
Cache busting, incluez le hachage dans le nom du fichier (remoteEntry.[contenthash].js).
Drapeaux de fonctionnalité, activez/désactivez les télécommandes via la configuration sur l'hôte.

Bonnes pratiques de performances

Partage de morceaux, utilisez splitChunks pour extraire les bibliothèques partagées.
Prefetch/Preload, <link rel="prefetch" href="remoteEntry.js"> pour améliorer le temps de chargement.
Secousse d'arbre, assurez-vous que seuls les modules utilisés sont inclus.
Surveillance, suivez la taille du paquet avec webpack-bundle-analyzer.

Sécurité

CORS, configurez Access-Control-Allow-Origin en-têtes sur les actifs distants.
Intégrité, utilisez l'intégrité des sous-ressources (attribut integrity) lors du chargement de remoteEntry.js.
Sandbox, limite la portée des télécommandes via CSP (script-src, object-src).

Liste de contrôle rapide

Configurez ModuleFederationPlugin sur l'hôte et les télécommandes.
Définissez shared pour les dépendances critiques (React, lodash).
Implémentez le chargement paresseux avec React.lazy ou import().
Publiez remoteEntry.js sur CDN avec hachage.
Configurez CI/CD pour une construction et un déploiement indépendants.
Testez le repli à distance hors ligne.
Surveiller la taille et les performances du bundle.
Appliquer CSP et SRI pour la sécurité.

Conclusion

La fédération de modules apporte la modularité et l'échelle organisationnelle au monde des front-ends, permettant aux équipes de fournir des fonctionnalités de manière indépendante tout en maintenant une expérience utilisateur cohérente et performante. En suivant de bonnes pratiques de configuration, de gestion des versions des dépendances et de CI/CD, votre équipe peut évoluer rapidement sans compromettre la qualité.

Avez-vous déjà implémenté des micro-frontends ? Partagez vos expériences dans les commentaires !