Microfrontends: Module Federation
Utilizar Webpack Module Federation ou Vite Federation para dividir um frontend grande em remotos implementados de forma independente e consumidos por uma aplicação anfitriã.
Microfrontends: Module Federation é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são microfrontends
Dividir um front-end grande em partes desenvolvidas e implantadas de forma independente — normalmente uma por equipe ou domínio de negócio. Cada parte pode ter seu próprio framework, repositório, fluxo de implantação e até pilha tecnológica. Uma aplicação shell as integra durante a execução.
Por que usar microfrontends
Organizações com mais de 10 equipes de front-end encontram limitações: gargalo de um único repositório, tempos de compilação lentos e cronogramas de lançamento conflitantes. Os microfrontends permitem que as equipes entreguem de forma independente — ao custo de uma complexidade arquitetural maior.
Module Federation — a técnica principal
Webpack Module Federation (Webpack 5, também disponível no Vite por meio de um plug-in) permite que uma aplicação shell importe, durante a execução, código de aplicações remotas implantadas de forma independente. A aplicação remota expõe módulos específicos; a shell os consome.
Configuração da aplicação remota
A aplicação remota expõe seus módulos por meio da configuração do webpack.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Configuração da shell (aplicação hospedeira)
A shell declara quais aplicações remotas importará.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Importando módulos remotos
Use uma importação dinâmica — o webpack a resolve por meio do ambiente de execução da federação.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Federação com Vite
O Vite oferece suporte ao Module Federation por meio do plug-in @originjs/vite-plugin-federation — com uma API semelhante.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Dependências compartilhadas
Liste bibliotecas como React em shared para que elas não sejam empacotadas duas vezes. O ambiente de execução da federação resolve a versão compatível mais alta durante a execução.
Implantação independente
Cada aplicação remota tem seu próprio fluxo de compilação e implantação. A shell aponta para uma URL — publicar uma nova aplicação remota a disponibiliza automaticamente para todos os consumidores.
Comunicação entre aplicações
Não compartilhe estado por meio de importações diretas — use eventos (CustomEvent), um barramento compartilhado simples ou postMessage. Mantenha os limites bem definidos para preservar a independência.
Alternativas: iframes e componentes Web
iframes: isolamento máximo, mas navegação e CSS complicados. Componentes Web: suporte nativo do navegador, sem dependência de um framework específico, mas com estado compartilhado limitado. O Module Federation equilibra o isolamento e a experiência do desenvolvedor.
Compromissos
Vantagens: implantações independentes, liberdade tecnológica e autonomia das equipes. Custos: configuração de compilação complexa, conflitos entre dependências compartilhadas, erros em tempo de execução difíceis de depurar e maior complexidade dos pacotes. Só vale a pena para organizações realmente grandes.
Quando evitar
Projetos de uma única equipe, MVPs e sites com menos de 100 pessoas no front-end. O custo da complexidade é real — a maioria das equipes deveria usar um monorepo.
Verificação rápida
O que o Webpack Module Federation permite em uma arquitetura de microfront-ends?
Recapitulação: microfront-ends
Divida o front-end por equipe ou domínio para permitir implantações independentes. Module Federation (webpack 5 / plugin do Vite) — o shell importa os módulos dos remotes em tempo de execução. O remote expõe módulos; o shell declara os remotes; ambos compartilham dependências como react. Use eventos para a comunicação entre aplicações. É complexo — reserve-o para organizações realmente grandes.
Perguntas Frequentes
A aula “Microfrontends: Module Federation” é grátis?
Sim — o texto completo de “Microfrontends: Module Federation” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Microfrontends: Module Federation”?
Utilizar Webpack Module Federation ou Vite Federation para dividir um frontend grande em remotos implementados de forma independente e consumidos por uma aplicação anfitriã. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Microfrontends: Module Federation”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Design atómico: átomos, moléculas e organismos
- Configuração de monorepo com Turborepo
- Microfrontends: Module Federation
- Estrutura de pastas baseada em funcionalidades