Vue Academy · Leçon

Fédération de modules Webpack avec Vue

ModuleFederationPlugin, exposes, remotes, dépendances partagées et chargement de composants distants

Fédération de modules Webpack avec Vue est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Module Federation dans Webpack

Webpack 5 intègre Module Federation. Cette fonctionnalité permet à une compilation d’exposer des modules à d’autres compilations et d’en consommer au moment de l’exécution — c’est le fondement des micro-frontends intégrés à l’exécution.

Hôtes et applications distantes

Deux rôles existent : une application distante expose des composants et un hôte les consomme. Une application peut jouer les deux rôles. Un hôte charge le code d’une application distante via HTTP au moment de l’exécution, et non à la compilation.

Le ModuleFederationPlugin

Vous configurez la fédération en ajoutant ModuleFederationPlugin au tableau plugins de webpack. Ses options définissent le nom, les éléments exposés, les éléments consommés et les dépendances partagées.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

L’option de nommage

name est l’identifiant global unique de cette compilation. Les hôtes utilisent ce nom pour référencer une application distante.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

L’option d’exposition (application distante)

Une application distante répertorie les modules qu’elle partage dans exposes. Les clés sont des chemins publics ; les valeurs sont des chemins vers des fichiers locaux.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

Le manifeste remoteEntry

Une application distante produit un manifeste remoteEntry.js qui décrit ses modules exposés. Les hôtes chargent ce fichier pour découvrir et récupérer le code de l’application distante au moment de l’exécution.

// host loads: https://checkout.example.com/remoteEntry.js

L’option des applications distantes (hôte)

Un hôte déclare les applications distantes qu’il consomme dans remotes, en associant un alias local au nom de l’application distante ainsi qu’à l’URL de son remoteEntry.js.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

L’option des dépendances partagées

shared répertorie les dépendances que les deux côtés doivent partager afin d’éviter de charger deux copies. Pour un framework comme Vue, vous devez le partager afin que tous les micro-frontends utilisent une seule instance.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true pour Vue

Vue doit être un singleton — une seule copie exactement dans la page. Deux instances de Vue perturbent la réactivité et l’identité des composants. Marquez-le comme singleton avec une exigence de version.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

Consommer un composant distant

Importez dynamiquement le module distant au moment de l’exécution. Comme il est chargé sur le réseau, utilisez un import() dynamique, généralement encapsulé dans defineAsyncComponent avec Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Afficher l’application distante

Utilisez le composant asynchrone comme n’importe quel autre composant dans votre modèle. Webpack récupère le code de l’application distante lors du premier affichage, puis le met en cache.

<template>
  <header>
    <CartButton />
  </header>
</template>

Vérification rapide

Vérifiez votre compréhension de Module Federation avec Vue.

Récapitulatif

Vous avez appris Module Federation de Webpack :

ModuleFederationPlugin configure la fédération ; name identifie la compilation.
Une application distante répertorie ses modules dans exposes et produit un manifeste remoteEntry.js.
Un hôte répertorie ses applications distantes dans remotes, en associant un alias à name@URL/remoteEntry.js.
shared évite les dépendances en double ; Vue nécessite singleton: true.
Consommez une application distante avec import("remote/Module") dynamique, souvent avec defineAsyncComponent.

Questions Fréquemment Posées

La leçon « Fédération de modules Webpack avec Vue » est-elle gratuite ?

Oui — le texte complet de « Fédération de modules Webpack avec Vue » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Fédération de modules Webpack avec Vue » ?

ModuleFederationPlugin, exposes, remotes, dépendances partagées et chargement de composants distants Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 2 sur 4.

Combien de temps prend la leçon « Fédération de modules Webpack avec Vue » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

Principes de l’architecture micro-frontend
Fédération de modules Webpack avec Vue
Plugin de fédération Vite
État partagé entre micro-frontends

← Retour à Vue Academy