GitHub

Micro Frontends dividem uma aplicação monolítica em partes menores, cada uma desenvolvida, testada e implantada de forma independente. O Module Federation do Webpack 5 fornece a infraestrutura necessária para que diferentes builds compartilhem módulos em tempo de execução, permitindo que equipes trabalhem de forma desacoplada.

Por que adotar Micro Frontends?

Escalabilidade organizacional, times podem entregar funcionalidades de forma autônoma.
Deploy independente, atualizações de um módulo não requerem rebuild de toda a aplicação.
Reuso de componentes, bibliotecas compartilhadas são carregadas apenas uma vez.
Performance, carregamento sob demanda (lazy loading) reduz o tamanho inicial do bundle.

Conceitos chave do Module Federation

Conceito	Descrição
Host	Aplicação que consome módulos remotos.
Remote	Aplicação que expõe módulos via `exposes`.
Shared	Dependências (React, lodash) que são carregadas uma única vez.
Dynamic Remotes	Carregamento de remotes em tempo de execução via `import()`.

Configuração básica (Webpack), 5 linhas

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

Cada aplicação tem seu próprio webpack.config.js; o host importa o módulo remoto como remote/Button.

Consumo de módulo remoto (React), 3 linhas

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

O React.lazy garante lazy loading do componente remoto, reduzindo o bundle inicial.

Estratégias de versionamento de dependências

Singleton, garante que apenas uma cópia de React seja carregada.
Strict Version, use requiredVersion para evitar incompatibilidades.
Fallback, configure fallback: 'path/to/local/react' caso o remote falhe.

Deploy e CI/CD

Build separado, cada micro-frontend tem seu pipeline (npm run build).
Publicação, faça upload dos assets (remoteEntry.js, bundles) para um CDN.
Cache busting, inclua hash no nome do arquivo (remoteEntry.[contenthash].js).
Feature flags, habilite/disable remotes via configuração no host.

Boas-práticas de performance

Chunk splitting, use splitChunks para extrair libs compartilhadas.
Prefetch/Preload, <link rel="prefetch" href="remoteEntry.js"> para melhorar tempo de carregamento.
Tree shaking, assegure que apenas módulos usados sejam incluídos.
Monitoramento, rastreie tamanho dos bundles com webpack-bundle-analyzer.

Segurança

CORS, configure cabeçalhos Access-Control-Allow-Origin nos assets remotos.
Integridade, use Subresource Integrity (integrity attribute) ao carregar remoteEntry.js.
Sandbox, limite o escopo dos remotes via CSP (script-src, object-src).

Checklist rápido

Configurar ModuleFederationPlugin no host e nos remotes.
Definir shared para dependências críticas (React, lodash).
Implementar lazy loading com React.lazy ou import().
Publicar remoteEntry.js em CDN com hash.
Configurar CI/CD para build e deploy independentes.
Testar fallback de remote offline.
Monitorar tamanho dos bundles e performance.
Aplicar CSP e SRI para segurança.

Conclusão

Module Federation traz modularidade e escala organizacional ao mundo dos front-ends, permitindo que equipes entreguem funcionalidades de forma independente, mantendo uma experiência de usuário coesa e performática. Ao seguir as boas-práticas de configuração, versionamento de dependências e CI/CD, seu time pode evoluir rapidamente sem comprometer a qualidade.

Já implementou micro frontends? Compartilhe suas experiências nos comentários!

Micro Frontends com Module Federation: Guia Prático