Vue Academy · Lezione

Module Federation di Webpack con Vue

ModuleFederationPlugin, exposes, remotes, dipendenze condivise, caricamento di componenti remoti.

Module Federation di Webpack con Vue è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Module Federation in Webpack

Webpack 5 include Module Federation integrato. Consente a una build di esporre moduli ad altre build e di consumare i loro moduli a runtime, costituendo la base dei micro-frontend run-time.

Host e remote

Esistono due ruoli: un remote espone componenti, mentre un host li consuma. Un'applicazione può svolgere entrambi i ruoli. Un host carica il codice di un remote tramite HTTP a runtime, non durante la build.

Il ModuleFederationPlugin

Configuri la federation aggiungendo ModuleFederationPlugin all'array plugins di webpack. Le sue opzioni definiscono il nome, ciò che viene esposto e consumato e le dipendenze condivise.

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

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

L'opzione name

name è l'identificatore globale univoco di questa build. Gli host fanno riferimento a un remote tramite questo nome.

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

L'opzione exposes (remote)

Un remote elenca i moduli che condivide in exposes. Le chiavi sono percorsi pubblici, mentre i valori sono percorsi di file locali.

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

Il manifest remoteEntry

Un remote genera un manifest remoteEntry.js che descrive i moduli esposti. Gli host caricano questo file per individuare e recuperare a runtime il codice del remote.

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

L'opzione remotes (host)

Un host dichiara i remote che consuma in remotes, associando un alias locale al nome del remote e all'URL del suo remoteEntry.js.

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

L'opzione shared

shared elenca le dipendenze che entrambi i lati dovrebbero condividere per evitare di caricarne due copie. Per un framework come Vue è necessario condividerlo, così tutti i micro-frontend utilizzano una sola istanza.

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

singleton: true per Vue

Vue deve essere un singleton: nella pagina deve esistere una sola copia. Due istanze di Vue compromettono la reattività e l'identità dei componenti. Lo contrassegni come singleton specificando un requisito di versione.

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

Consumo di un componente remote

Importi dinamicamente il modulo remote a runtime. Poiché viene caricato dalla rete, utilizzi un import() dinamico, in genere racchiuso in defineAsyncComponent in Vue.

import { defineAsyncComponent } from "vue"

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

Rendering del remote

Utilizzi il componente asincrono come qualsiasi altro componente nel template. Webpack recupera il codice del remote al primo rendering e lo memorizza nella cache.

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

Verifica rapida

Verifichi la Sua comprensione di Module Federation con Vue.

Riepilogo

Ha imparato Module Federation di Webpack:

ModuleFederationPlugin configura la federation; name identifica la build.
Un remote elenca i moduli in exposes e genera un manifest remoteEntry.js.
Un host elenca i remote in remotes, associando un alias a name@URL/remoteEntry.js.
shared impedisce la duplicazione delle dipendenze; Vue richiede singleton: true.
Consumi un remote tramite import("remote/Module") dinamico, spesso con defineAsyncComponent.

Domande Frequenti

La lezione «Module Federation di Webpack con Vue» è gratuita?

Sì — il testo completo di «Module Federation di Webpack con Vue» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Module Federation di Webpack con Vue»?

ModuleFederationPlugin, exposes, remotes, dipendenze condivise, caricamento di componenti remoti. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Module Federation di Webpack con Vue»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Principi dell'architettura micro-frontend
Module Federation di Webpack con Vue
Plugin Vite Federation
Stato condiviso tra micro-frontend

← Torna a Vue Academy