0Pricing
Micro Frontends Architecture with Module Federation · Aula

Configuração de Dependências Compartilhadas

Aprenda como a opção compartilhada do Module Federation permite que aplicativos host e remotos compartilhem bibliotecas como React, evitando downloads duplicados e conflitos de versão.

Configuração de Dependências Compartilhadas é uma aula grátis de Micro Frontends Architecture with Module Federation no CoddyKit. Esta é a aula 4 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 Micro Frontends Architecture with Module Federation, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

The Duplication Problem

Without coordination, a host and each remote would each bundle their own copy of React, Lodash, and other libraries. Users would download the same code many times.

The shared option solves this.

What shared Does

The shared key in ModuleFederationPlugin tells webpack which dependencies should be loaded once and reused across federated apps at run time.

Basic shared Syntax

The simplest form lists package names as an array. Webpack then negotiates a single shared instance at run time.

new ModuleFederationPlugin({
  name: "host",
  shared: ["react", "react-dom"]
});

Object Form for Options

The object form gives fine-grained control per dependency, such as marking it required or singleton.

shared: {
  react: { singleton: true, requiredVersion: "^18.0.0" },
  "react-dom": { singleton: true }
}

The singleton Option

singleton: true forces every app to use ONE instance of the library. This is essential for React, whose hooks break if two copies load at once.

requiredVersion and Negotiation

Each app declares a requiredVersion. At run time Module Federation picks the highest version that satisfies everyone. If versions are incompatible, it warns or falls back.

shared: {
  react: { singleton: true, requiredVersion: "^18.2.0" }
}

The eager Option

eager: true bundles the shared dependency into the initial chunk instead of loading it asynchronously. Useful for the host shell but increases initial bundle size.

shared: {
  react: { singleton: true, eager: true }
}

Reading from package.json

To avoid hardcoding versions, you can derive them from your dependencies, keeping shared config in sync with what you actually install.

const deps = require("./package.json").dependencies;
shared: {
  react: { singleton: true, requiredVersion: deps.react }
}

strictVersion

strictVersion: true makes Module Federation throw instead of falling back when no compatible version is found — surfacing mismatches early during testing.

Common Pitfalls

Watch out for:

  • Forgetting singleton on React, causing hook errors
  • Mismatched major versions across remotes
  • Overusing eager, bloating the first load

Verifying Sharing Works

Open the browser network tab: if React loads only once across host and remotes, sharing is working. The webpack build log also reports shared-module resolution.

Quick Check

Test your shared-dependency knowledge.

Recap

You configured shared dependencies:

  • shared avoids duplicate libraries across apps
  • Use the object form for per-package control
  • singleton is critical for React and React-DOM
  • requiredVersion drives run-time negotiation
  • Use eager and strictVersion deliberately

Good sharing keeps federated apps fast and conflict-free.

Perguntas Frequentes

A aula “Configuração de Dependências Compartilhadas” é grátis?

Sim — o texto completo de “Configuração de Dependências Compartilhadas” é 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 Micro Frontends Architecture with Module Federation, atualize para CoddyKit PRO. O curso de Micro Frontends Architecture with Module Federation inclui 4 aulas no total.

O que vou aprender em “Configuração de Dependências Compartilhadas”?

Aprenda como a opção compartilhada do Module Federation permite que aplicativos host e remotos compartilhem bibliotecas como React, evitando downloads duplicados e conflitos de versão. Você pratica Micro Frontends Architecture with Module Federation 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 Micro Frontends Architecture with Module Federation?

Nenhuma experiência prévia é necessária. Micro Frontends Architecture with Module Federation 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 4 de 4.

Quanto tempo leva a aula “Configuração de Dependências Compartilhadas”?

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 Micro Frontends Architecture with Module Federation?

Sim. Cada aula de Micro Frontends Architecture with Module Federation 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

  1. Revisão dos fundamentos do Webpack
  2. Introdução à federação de módulos
  3. Aplicações hospedeiras e remotas
  4. Configuração de Dependências Compartilhadas
← Voltar para Micro Frontends Architecture with Module Federation