Fundamentos da federação de módulos

A Federação de Módulos permite que uma aplicação JavaScript carregue e execute, em tempo de execução, código de outra aplicação implantada de forma independente. Originado no Webpack 5, esse padrão agora também é possível por meio de mapas de importações nativos e importação dinâmica.

Grandes organizações dividem monólitos em várias "microaplicações de front-end" implantadas de forma independente — uma aplicação contêiner principal e várias aplicações de funcionalidades. A federação de módulos permite que o contêiner carregue cada funcionalidade sob demanda sem agrupá-las durante a compilação.

No Webpack 5, o contêiner declara remotes (outras aplicações a serem consumidas) e as aplicações remotas declaram exposes (o que oferecem). O ambiente de execução busca um pequeno manifesto de cada aplicação remota na inicialização e baixa os blocos conforme o contêiner os importa.

Sem o Webpack, a mesma ideia funciona com mapas de importações que apontam para pacotes ESM remotos e com importação dinâmica para o carregamento. O mapa de importações do contêiner declara "feature-cart": "https://cart-team.example.com/entry.js"; import("feature-cart") carrega a versão implantada mais recente.

Sem coordenação, cada aplicação remota enviaria sua própria cópia do React. As ferramentas de federação permitem declarar dependências compartilhadas — a primeira aplicação remota a carregar o React o disponibiliza para todas as outras. As abordagens nativas usam mapas de importações para apontar todas as aplicações remotas para a mesma URL do React.

Cada equipe é responsável por sua aplicação remota e faz a implantação quando quiser. O contêiner nunca precisa ser recompilado; ele obtém novas versões no próximo carregamento da página (ou por meio da invalidação de cache). Isso desacopla completamente os ciclos de lançamento.

Fixe as aplicações remotas em URLs versionadas (/v1/entry.js, /v2/entry.js) para que uma atualização do contêiner seja intencional, e não implícita. Algumas equipes usam correspondência de semver no nível do mapa de importações por meio de ferramentas como JSPM.

A federação acrescenta complexidade ao ambiente de execução: mais solicitações de rede, depuração mais difícil entre origens e o risco de dependências compartilhadas incompatíveis. Use-a quando você realmente precisar de implantação independente; para projetos menores, uma única compilação é mais simples e rápida.

Um módulo remoto que falhe não deve derrubar a aplicação anfitriã. Envolva as importações dinâmicas em limites de erro (React) ou use tratamento de exceções (JavaScript puro) e renderize uma interface alternativa quando um módulo remoto falhar. O contêiner permanece funcional mesmo que um recurso fique temporariamente indisponível.

As exportações remotas não têm informações de tipo em tempo de compilação na aplicação anfitriã. Gere tipos compartilhados do TypeScript em um pacote separado consumido por ambas as partes ou use validação em tempo de execução (Zod, io-ts) no limite da federação.

A federação nativa (mapas de importação + ESM) é mais simples e baseada em padrões, mas não conta com a coordenação de dependências compartilhadas do Webpack. Escolha Webpack/Module Federation para aplicações complexas com muitas dependências compartilhadas; escolha a opção nativa para arquiteturas mais simples de microaplicações.

O W3C está explorando primitivas mais avançadas de carregamento de módulos que tornariam a federação nativa mais capaz — incluindo uma negociação melhor de dependências compartilhadas. Hoje, trate os mapas de importação como a base e sobreponha suas ferramentas de federação.

Qual é a principal motivação para usar o Module Federation em uma aplicação de grande porte?

O Module Federation permite que uma aplicação anfitriã carregue código de módulos remotos implantados de forma independente durante a execução. As ferramentas do Webpack 5 acrescentam a negociação de dependências compartilhadas; a federação nativa usa mapas de importação e importação dinâmica. Use-o em arquiteturas de microaplicações com várias equipes; aceite a complexidade adicional em troca da liberdade de implantação independente.