0Pricing
Micro Frontends Architecture with Module Federation · Lektion

Gemeinsam genutzte Abhängigkeiten konfigurieren

Lernen Sie, wie die shared-Option in Module Federation Host- und Remote-Apps ermöglicht, Bibliotheken wie React gemeinsam zu nutzen und doppelte Downloads sowie Versionskonflikte zu vermeiden.

Gemeinsam genutzte Abhängigkeiten konfigurieren ist eine kostenlose Micro Frontends Architecture with Module Federation-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Micro Frontends Architecture with Module Federation-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Gemeinsam genutzte Abhängigkeiten konfigurieren“ kostenlos?

Ja — der vollständige Text von „Gemeinsam genutzte Abhängigkeiten konfigurieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Micro Frontends Architecture with Module Federation-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Micro Frontends Architecture with Module Federation-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Gemeinsam genutzte Abhängigkeiten konfigurieren“?

Lernen Sie, wie die shared-Option in Module Federation Host- und Remote-Apps ermöglicht, Bibliotheken wie React gemeinsam zu nutzen und doppelte Downloads sowie Versionskonflikte zu vermeiden. Du übst Micro Frontends Architecture with Module Federation mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Micro Frontends Architecture with Module Federation zu starten?

Keine Vorkenntnisse erforderlich. Micro Frontends Architecture with Module Federation auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Gemeinsam genutzte Abhängigkeiten konfigurieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Micro Frontends Architecture with Module Federation-Lektion Code schreiben und ausführen?

Ja. Jede Micro Frontends Architecture with Module Federation-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Webpack-Grundlagen auffrischen
  2. Einführung in Module Federation
  3. Host- und Remote-Anwendungen
  4. Gemeinsam genutzte Abhängigkeiten konfigurieren
← Zurück zu Micro Frontends Architecture with Module Federation