Micro frontend con federazione di moduli: guida pratica

I Micro frontend dividono un'applicazione monolitica in parti più piccole, ciascuna sviluppata, testata e distribuita in modo indipendente. La Module Federation di Webpack 5 fornisce l'infrastruttura necessaria affinché diverse build condividano i moduli in fase di runtime, consentendo ai team di lavorare in modo disaccoppiato.

Perché adottare i Micro Frontend?

Scalabilità organizzativa, i team possono fornire funzionalità in modo autonomo.
Distribuzione indipendente, gli aggiornamenti a un modulo non richiedono la ricostruzione dell'intera applicazione.
Riutilizzo dei componenti, le librerie condivise vengono caricate una sola volta.
Prestazioni, il caricamento su richiesta (caricamento lento) riduce la dimensione iniziale del bundle.

Concetti chiave della federazione dei moduli

Concetto	Descrizione
Ospite	Applicazione che utilizza moduli remoti.
Telecomando	Applicazione che espone i moduli tramite `exposes`.
Condiviso	Dipendenze (React, lodash) che vengono caricate una volta.
Telecomandi dinamici	Caricamento dei telecomandi in fase di esecuzione tramite `import()`.

Configurazione base (Webpack), 5 righe

// 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 } }
  })]
};

Ogni applicazione ha il proprio webpack.config.js; l'host importa il modulo remoto come remote/Button.

Consumo del modulo remoto (React), 3 linee

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

React.lazy garantisce il lazy load del componente remoto, riducendo il bundle iniziale.

Strategie di controllo delle versioni delle dipendenze

Singleton, garantisce che venga caricata solo una copia di React.
Versione rigorosa, usa requiredVersion per evitare incompatibilità.
Fallback, configura fallback: 'path/to/local/react' se il telecomando si guasta.

Distribuzione e CI/CD

Build separata, ogni micro-frontend ha la propria pipeline (npm run build).
Pubblicazione, carica le risorse (remoteEntry.js, bundle) su una CDN.
Bust della cache, includere l'hash nel nome del file (remoteEntry.[contenthash].js).
Flag funzionalità, abilita/disabilita i telecomandi tramite la configurazione sull'host.

Buone pratiche di prestazione

Suddivisione dei blocchi, usa splitChunks per estrarre le librerie condivise.
Prefetch/Preload, <link rel="prefetch" href="remoteEntry.js"> per migliorare il tempo di caricamento.
Scuotimento dell'albero, assicurarsi che siano inclusi solo i moduli usati.
Monitoraggio, traccia la dimensione del pacco con webpack-bundle-analyzer.

##Sicurezza

CORS, configura Access-Control-Allow-Origin intestazioni su risorse remote.
Integrità, utilizza l'integrità della risorsa secondaria (attributo integrity) durante il caricamento di remoteEntry.js.
Sandbox, limita l'ambito dei telecomandi tramite CSP (script-src, object-src).

Lista di controllo rapida

Configurare ModuleFederationPlugin sull'host e sui telecomandi.
Imposta shared per le dipendenze critiche (React, lodash).
Implementa il caricamento lento con React.lazy o import().
Pubblica remoteEntry.js su CDN con hash.
Configura CI/CD per build e distribuzione indipendenti.
Prova il fallback remoto offline.
Monitora le dimensioni e le prestazioni del pacchetto.
Applicare CSP e SRI per la sicurezza.

Conclusione

Module Federation porta la modularità e la scala organizzativa nel mondo dei front-end, consentendo ai team di fornire funzionalità in modo indipendente mantenendo un'esperienza utente coesa e performante. Seguendo una buona configurazione, controllo delle versioni delle dipendenze e pratiche CI/CD, il tuo team può evolversi rapidamente senza compromettere la qualità.

Hai già implementato micro frontend? Condividi le tue esperienze nei commenti!