O que é Module Federation?

O Module Federation é uma das funcionalidades mais poderosas introduzidas no Webpack 5. Ele mudou a forma como pensamos em arquitetura de front-end, permitindo que diferentes aplicações compartilhem código de forma dinâmica em tempo de execução.

Aqui está uma explicação detalhada para você entender o conceito, as vantagens e como ele funciona na prática.

---

O que é Module Federation?

Imagine que você tem vários micro-frontends (pequenas aplicações independentes). Antes do Module Federation, para compartilhar um componente (como um botão ou um menu) entre eles, você precisava publicar esse componente como um pacote no NPM, instalá-lo em todas as aplicações e buildar tudo novamente.

Com o Module Federation, uma aplicação pode expor parte do seu código (componentes, funções, estados) e outra aplicação pode consumir esse código sem precisar instalar nada ou buildar novamente. O código é carregado diretamente do “servidor” da aplicação de origem no momento em que o usuário acessa o site.

Conceitos Chave:

• Host: A aplicação “mestre” que recebe os módulos.

• Remote: A aplicação “servidora” que expõe os módulos.

• Exposes: A lista de arquivos que o Remote decide compartilhar.

• Remotes: A lista de endereços que o Host usará para buscar o código.

---

Por que ele é revolucionário?

O Module Federation resolve os principais problemas de arquiteturas de Micro-frontends:

1. Independência de Deploy: Você pode atualizar o menu no “Projeto A” e ele será atualizado automaticamente no “Projeto B” (o Host), sem que você precise mexer no código do Projeto B.

2. Compartilhamento de Dependências: Se o Host e o Remote usam o React, o Module Federation é inteligente o suficiente para carregar o React apenas uma vez, economizando banda e memória.

3. Performance: Diferente de usar iframes (que são pesados e isolados), o Module Federation compartilha o mesmo contexto de execução do JavaScript.

---

Como funciona na prática? (Configuração)

A configuração é feita diretamente no arquivo webpack.config.js.

1. No lado do “Remote” (Quem compartilha)

JavaScript

// webpack.config.js do Remote
new ModuleFederationPlugin({
  name: "app_vendas",
  filename: "remoteEntry.js",
  exposes: {
    "./BotaoComprar": "./src/components/BotaoComprar",
  },
  shared: ["react", "react-dom"],
})

2. No lado do “Host” (Quem consome)

JavaScript

// webpack.config.js do Host
new ModuleFederationPlugin({
  name: "app_principal",
  remotes: {
    vendas: "app_vendas@http://localhost:3001/remoteEntry.js",
  },
  shared: ["react", "react-dom"],
})

3. Usando o componente

No código do Host, você importa como se fosse um componente local:

JavaScript

const BotaoRemote = React.lazy(() => import("vendas/BotaoComprar"));

---

Comparativo: NPM vs Module Federation

CaracterísticaNPM / Bibliotecas TradicionaisModule FederationAtualizaçãoRequer npm install e novo build.Instantânea (em tempo de execução).Tamanho do BundlePode duplicar código se não houver cuidado.Compartilha dependências automaticamente.AutonomiaTimes dependem da versão do pacote.Times entregam funcionalidades direto ao usuário.

---

Quando usar?

O Module Federation não é necessário para todos os projetos. Ele brilha em:

• Empresas grandes: Onde vários times cuidam de partes diferentes da mesma plataforma.

• Sistemas de Design (Design Systems): Para garantir que todos os micro-apps usem a versão mais recente dos componentes visualmente.

• Aplicações Escaláveis: Onde o tempo de build de um monolito está ficando insustentável.