Micro Frontends Architecture with Module Federation · Lektion

Gemeinsam genutzte Abhängigkeiten verwenden

Lernen Sie, gemeinsame Bibliotheken und Abhängigkeiten effizient zwischen föderierten Anwendungen zu teilen.

Gemeinsam genutzte Abhängigkeiten verwenden ist eine kostenlose Micro Frontends Architecture with Module Federation-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Why Share Dependencies?

In Micro Frontends, different parts of your application might use the same libraries, like React, Vue, or Lodash. Without careful management, each Micro Frontend could bundle its own copy of these libraries.

This means users would download the same code multiple times, increasing load times and wasting bandwidth. Sharing dependencies solves this problem!

The Problem: Duplicate Bundles

Imagine your main 'Host' application uses React, and a 'Remote' Micro Frontend also uses React. If both bundle React independently, your user's browser ends up downloading React twice.

Host Bundle: Includes React
Remote Bundle: Includes React (again!)

This leads to larger overall application sizes and slower performance.

Module Federation's Solution

Webpack's Module Federation offers a powerful solution: the shared configuration. It allows you to declare common libraries that should be shared across your federated applications.

Module Federation then ensures these libraries are loaded only once, even if multiple Micro Frontends depend on them.

Configuring `shared`

You define shared dependencies within the ModuleFederationPlugin in your webpack.config.js file. The shared property is an object where each key is the name of a module you want to share.

Here's a basic look at how it's structured:

new ModuleFederationPlugin({
  // ... other configs
  shared: {
    // 'module-name': { options }
    'react': { /* ... */ },
    'react-dom': { /* ... */ }
  }
})

Sharing with `requiredVersion`

The requiredVersion option is crucial for compatibility. It specifies the acceptable version range for a shared dependency using semantic versioning (e.g., ^18.0.0).

Module Federation will try to use a compatible version already loaded; if none exists or it's incompatible, it will load a new one.

shared: {
  react: {
    requiredVersion: '^18.0.0',
    // other options like singleton: true
  },
  'react-dom': {
    requiredVersion: '^18.0.0'
  }
}

The `eager` Property Explained

Normally, shared modules are loaded asynchronously, on demand. However, sometimes a shared module is needed immediately at startup, before any remote modules are even requested.

For such cases, you can use the eager: true option. Be cautious, as this can impact initial load performance by forcing the module to load upfront.

shared: {
  'my-critical-lib': {
    requiredVersion: '^1.0.0',
    eager: true // Load this module immediately
  }
}

Host & Remote `shared` Configs

Both your host and remote applications should typically define the same common libraries as shared. This tells Module Federation that these dependencies are part of the shared pool.

Module Federation then orchestrates which application actually loads the dependency and makes it available to others, ensuring only one copy exists in the browser.

Practical Use of Shared Deps

When react and react-dom are configured as shared, your application code can simply import them as usual. Module Federation handles the underlying logic to ensure they are loaded efficiently and only once.

This minimal React entry point demonstrates how standard imports leverage shared dependencies:

import React from 'react';
import ReactDOM from 'react-dom/client';

// This is a minimal React app entry point.
// If 'react' and 'react-dom' are shared in Module Federation,
// these imports will efficiently use a single instance.
function App() {
  return (
    <div>
      <h1>Shared Dependencies Demo</h1>
      <p>This app uses React, which can be shared!</p>
    </div>
  );
}

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  console.error("Root element not found!");
}

Benefits of Sharing Libraries

Smaller Bundle Sizes: Prevents common libraries from being duplicated across different Micro Frontends, directly reducing the total amount of code users download.
Improved Performance: Less code to download, parse, and execute means faster initial page load times and a more responsive user experience.
Consistent Versions: Helps ensure all parts of your federated application use the same version of a library, reducing potential conflicts and unexpected behavior.

Shared Dependencies Check

Module Federation's shared configuration is crucial for efficient Micro Frontends. Which option correctly describes a key benefit of using shared dependencies?

Recap & Next Steps

We've learned how Module Federation's shared configuration is vital for optimizing Micro Frontends. By defining common libraries as shared, you prevent them from being bundled multiple times.

This leads to smaller initial load times, better performance, and more consistent dependency versions across your federated applications.

Next, we'll dive deeper into managing Singleton Modules & Versioning to ensure robust shared dependency handling.

Häufig gestellte Fragen

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

Ja — der vollständige Text von „Gemeinsam genutzte Abhängigkeiten verwenden“ 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 verwenden“?

Lernen Sie, gemeinsame Bibliotheken und Abhängigkeiten effizient zwischen föderierten Anwendungen zu teilen. 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 1 von 4.

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

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

Gemeinsam genutzte Abhängigkeiten verwenden
Singleton-Module und Versionierung
Dynamisches Laden von Modulen
Status und Hilfsfunktionen über Remotes hinweg teilen

← Zurück zu Micro Frontends Architecture with Module Federation