Federação de módulos: importações dinâmicas em tempo de execução

Em uma organização de front-end com várias equipes, várias aplicações implantadas de forma independente geralmente precisam compartilhar componentes de interface e utilitários. Publicar no npm exige aumentar a versão, fazer uma nova publicação e reimplantar completamente cada aplicação consumidora, criando um forte acoplamento entre as equipes e ciclos de iteração lentos.

A abordagem tradicional, que publica o código compartilhado como um pacote npm, significa que atualizar um componente de botão compartilhado exige: atualizar o pacote npm, publicar uma nova versão, atualizar o package.json de cada aplicação consumidora, recompilar e reimplantar cada aplicação consumidora. O Module Federation elimina todas essas etapas.

O Module Federation permite que uma aplicação, chamada de "remota", disponibilize módulos JavaScript que outra aplicação, chamada de "hospedeira", carrega e executa em tempo de execução, sem recompilar nem reimplantar a aplicação hospedeira. Quando o usuário carrega a aplicação hospedeira, ela busca dinamicamente os módulos da aplicação remota conforme necessário.

O Webpack 5 introduziu o Module Federation como um recurso integrado de primeira classe por meio do ModuleFederationPlugin. Antes do Webpack 5, padrões semelhantes exigiam configuração manual complexa ou plug-ins de terceiros. O plug-in gerencia automaticamente todo o carregamento dinâmico e o gerenciamento do escopo compartilhado.

Uma aplicação remota é uma aplicação implantada de forma independente que disponibiliza um ou mais módulos — componentes React, utilitários ou páginas completas de funcionalidades — para serem consumidos por outras aplicações. A aplicação remota cria um manifesto remoteEntry.js que descreve o que ela disponibiliza e como carregá-lo.

Uma aplicação hospedeira é uma aplicação que consome módulos de uma ou mais aplicações remotas. A aplicação hospedeira referencia as aplicações remotas por nome e URL na configuração do Webpack. Quando o código da aplicação hospedeira importa um módulo remoto, o ambiente de execução do Module Federation do Webpack o busca e executa dinamicamente a partir da URL da aplicação remota.

Módulos compartilhados são bibliotecas, como React e React DOM, que devem ser carregadas apenas uma vez, mesmo que tanto a aplicação hospedeira quanto a remota as incluam. Ao marcar o React como uma instância única compartilhada, o Module Federation garante que apenas uma versão do React seja executada — algo essencial porque os ganchos do React falham com várias instâncias.

Quando você compila uma aplicação remota, o Webpack gera um arquivo remoteEntry.js no nome de arquivo configurado. Esse arquivo é um manifesto leve e um script de inicialização: ele declara quais módulos a aplicação remota disponibiliza, lista as URLs dos blocos e inicializa o escopo compartilhado. A aplicação hospedeira baixa esse arquivo primeiro para descobrir o que a aplicação remota oferece.

Quando a aplicação hospedeira encontra uma importação de um módulo remoto, ela verifica se o código da aplicação remota já foi carregado. Caso não tenha sido, busca o remoteEntry.js na URL da aplicação remota, inicializa o escopo compartilhado, negociando as versões das bibliotecas compartilhadas, e então baixa e executa o bloco específico que contém o módulo solicitado.

Uma equipe implanta uma nova versão da aplicação remota, com um componente Button atualizado, sem alterar a aplicação hospedeira. O próximo usuário que carregar a aplicação hospedeira receberá automaticamente o novo Button, porque a aplicação hospedeira sempre busca o remoteEntry.js atual na URL da aplicação remota. Não é necessário recompilar nem reimplantar a aplicação hospedeira, nem coordenar as equipes.

Um padrão mais antigo de microfrontends utiliza quadros incorporados para isolar seções pertencentes às equipes. Os quadros incorporados oferecem um isolamento forte, mas tornam extremamente difícil compartilhar estado, fazer roteamento de URL e manter a estilização. O Module Federation mantém tudo no mesmo contexto de JavaScript, permitindo compartilhar o roteamento, o estado de autenticação e a estilização consistente.

Qual é o papel do remoteEntry.js no Module Federation?

O Module Federation resolve o problema da implantação independente de código compartilhado de front-end ao permitir o carregamento de módulos em tempo de execução. As aplicações remotas disponibilizam módulos por meio do remoteEntry.js; as aplicações hospedeiras os consomem dinamicamente sem recompilar. Instâncias únicas compartilhadas, como React e React DOM, evitam o carregamento duplicado de bibliotecas. Essa arquitetura permite uma verdadeira implantação independente: atualize uma aplicação remota e todas as aplicações hospedeiras verão a alteração imediatamente.