Micro-frontend: Module Federation
Usare Webpack Module Federation o Vite Federation per suddividere un frontend di grandi dimensioni in remoti distribuiti indipendentemente e utilizzati da un’app shell
Micro-frontend: Module Federation è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Che cosa sono i micro frontend?
La suddivisione di un frontend di grandi dimensioni in parti sviluppate e distribuite in modo indipendente, in genere una per team o dominio aziendale. Ogni parte può avere il proprio framework, repository, pipeline di deploy e persino stack tecnologico. Un'app shell le integra durante il runtime.
Perché utilizzare i micro frontend?
Le organizzazioni con più di 10 team frontend incontrano dei limiti: collo di bottiglia del repository unico, tempi di build elevati e pianificazioni dei rilasci in conflitto. I micro frontend consentono ai team di rilasciare in modo indipendente, al costo di una maggiore complessità architetturale.
Module Federation — la tecnica principale
Webpack Module Federation (Webpack 5, disponibile anche in Vite tramite plugin) consente a un'app shell di importare durante il runtime codice proveniente da remote distribuiti indipendentemente. Il remote espone moduli specifici; la shell li utilizza.
Configurazione del remote
L'app remote espone i propri moduli tramite la configurazione di 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']
})
]
};Configurazione della shell (host)
La shell dichiara i remote da importare.
// 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']
})
]
};Importazione dei moduli remote
Utilizzi l'importazione dinamica: webpack la risolve tramite il runtime di federation.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Federation in Vite
Vite supporta Module Federation tramite il plugin @originjs/vite-plugin-federation, con un'API simile.
// 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']
})]
};Dipendenze condivise
Indichi librerie come React in shared per evitare di includerle due volte nel bundle. Il runtime di federation risolve durante l'esecuzione la versione compatibile più recente.
Deployment indipendente
Ogni remote ha la propria pipeline di build e deploy. La shell punta a un URL: la pubblicazione di un nuovo remote lo distribuisce automaticamente a tutti i consumer.
Comunicazione tra app
Non condivida lo stato tramite import diretti: utilizzi eventi (CustomEvent), un piccolo bus condiviso o postMessage. Mantenga puliti i confini per preservare l'indipendenza.
Alternative: iframe e Web Components
iframe: isolamento massimo, ma navigazione e CSS poco pratici. Web Components: supporto nativo del browser, nessun vincolo a un framework, ma stato condiviso limitato. Module Federation bilancia isolamento ed esperienza degli sviluppatori.
Compromessi
Vantaggi: distribuzioni indipendenti, libertà tecnologica, autonomia dei team. Costi: configurazione complessa della build, conflitti tra dipendenze condivise, errori a runtime difficili da diagnosticare, maggiore complessità dei bundle. Vale la pena solo per organizzazioni realmente grandi.
Quando evitarlo
Progetti gestiti da un solo team, MVP, siti con meno di 100 persone nel team frontend. Il costo della complessità è reale: la maggior parte dei team dovrebbe usare invece un monorepo.
Verifica rapida
Che cosa consente Webpack Module Federation in un'architettura micro-frontend?
Riepilogo: micro-frontend
Dividere il frontend per team o dominio per ottenere distribuzioni indipendenti. Module Federation (webpack 5 / Vite plugin): la shell importa i moduli dai remoti a runtime. Il remoto espone i moduli; la shell dichiara i remoti; entrambi condividono dipendenze come react. Usare gli eventi per la comunicazione tra applicazioni. È complesso: riservarlo a organizzazioni realmente grandi.
Domande Frequenti
La lezione «Micro-frontend: Module Federation» è gratuita?
Sì — il testo completo di «Micro-frontend: Module Federation» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Micro-frontend: Module Federation»?
Usare Webpack Module Federation o Vite Federation per suddividere un frontend di grandi dimensioni in remoti distribuiti indipendentemente e utilizzati da un’app shell Eserciti Frontend 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 Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend 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 3 di 4.
Quanto tempo richiede la lezione «Micro-frontend: Module Federation»?
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 Frontend Academy?
Sì. Ogni lezione Frontend 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
- Atomic Design: atomi, molecole e organismi
- Configurare un monorepo con Turborepo
- Micro-frontend: Module Federation
- Struttura delle cartelle basata sulle funzionalità