Module Federation: import dinamici a runtime

In un’organizzazione frontend composta da più team, diverse applicazioni distribuite indipendentemente devono spesso condividere componenti UI e utility. La pubblicazione su npm richiede un incremento della versione, una nuova release e il redeploy completo di ogni applicazione che utilizza il pacchetto, creando uno stretto accoppiamento tra i team e rallentando i cicli di iterazione.

L’approccio tradizionale, cioè pubblicare il codice condiviso come pacchetto npm, significa che per aggiornare un componente button condiviso occorre: aggiornare il pacchetto npm, pubblicare una nuova versione, aggiornare il package.json di ogni app che lo utilizza, ricompilare e ridistribuire ogni app che lo utilizza. Module Federation elimina tutti questi passaggi.

Module Federation consente a un’applicazione, chiamata "remote", di esporre moduli JavaScript che un’altra applicazione, chiamata "host", carica ed esegue a runtime, senza ricompilare né ridistribuire l’host. Quando l’utente carica l’app host, questa recupera dinamicamente i moduli del remote quando necessario.

Webpack 5 ha introdotto Module Federation come funzionalità integrata di prima classe tramite ModuleFederationPlugin. Prima di Webpack 5, per ottenere pattern simili erano necessarie configurazioni manuali complesse o plugin di terze parti. Il plugin gestisce automaticamente tutto il caricamento dinamico e la gestione dell’ambito condiviso.

Un remote è un’applicazione distribuita indipendentemente che espone uno o più moduli, come componenti React, utility o intere pagine funzionali, affinché altre applicazioni possano utilizzarli. Il remote genera un manifest remoteEntry.js che descrive ciò che espone e come caricarlo.

Un host è un’applicazione che utilizza moduli provenienti da uno o più remote. L’host fa riferimento ai remote tramite nome e URL nella configurazione di Webpack. Quando il codice dell’host importa un modulo remote, il runtime di Module Federation lo recupera ed esegue dinamicamente dall’URL del remote.

I moduli condivisi sono librerie, come React e React DOM, che devono essere caricate una sola volta, anche se sono incluse sia nell’host sia nel remote. Configurando React come singleton condiviso, Module Federation garantisce che venga eseguita una sola versione di React, aspetto fondamentale perché gli hook di React smettono di funzionare in presenza di più istanze.

Quando si compila un remote, Webpack genera un file remoteEntry.js con il nome configurato. Questo file è un manifest leggero e uno script di bootstrap: dichiara i moduli esposti dal remote, elenca gli URL dei relativi chunk e inizializza l’ambito condiviso. L’host scarica prima questo file per scoprire cosa offre il remote.

Quando l’host incontra un import da un modulo remote, verifica se il codice del remote è già stato caricato. In caso contrario, recupera remoteEntry.js dall’URL del remote, inizializza l’ambito condiviso negoziando le versioni delle librerie condivise, quindi scarica ed esegue il chunk specifico che contiene il modulo richiesto.

Un team distribuisce una nuova versione del proprio remote, contenente un componente Button aggiornato, senza modificare l’applicazione host. Il prossimo utente che carica l’host riceve automaticamente il nuovo Button, perché l’host recupera sempre il file remoteEntry.js corrente dall’URL del remote. Nessuna ricompilazione dell’host, nessun redeploy dell’host e nessun coordinamento necessario.

Un pattern di micro-frontend più datato utilizza gli iframe per isolare le sezioni gestite dai team. Gli iframe offrono un forte isolamento, ma rendono estremamente difficili la condivisione dello stato, il routing degli URL e la gestione degli stili. Module Federation mantiene tutto nello stesso contesto JavaScript, consentendo di condividere routing, stato di autenticazione e stili coerenti.

Qual è il ruolo di remoteEntry.js in Module Federation?

Module Federation risolve il problema del deployment indipendente del codice frontend condiviso, consentendo il caricamento dei moduli a runtime. I remote espongono i moduli tramite remoteEntry.js; gli host li utilizzano dinamicamente senza ricompilare. I singleton condivisi, come React e React DOM, impediscono il caricamento duplicato delle librerie. Questa architettura consente un vero deployment indipendente: aggiornando un remote, tutte le applicazioni host vedono immediatamente la modifica.