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.
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:
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.
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.
Performance: Diferente de usar iframes (que são pesados e isolados), o Module Federation compartilha o mesmo contexto de execução do JavaScript.
O post ficou grande, então o restante está no site abaixo:
https://nathanafacion.substack.com/p/o-que-e-module-federation
Top comments (0)