Q49: How does Webpack Module Federation work in React Micro-Frontend architectures?
Module Federation allows a JavaScript application to dynamically load asynchronous bundle chunks from another separate deployment at runtime. Micro-frontends share common dependencies (like react and react-dom) as singletons to avoid loading duplicate library scripts.
Module Federation Remote Import
import React, { lazy, Suspense } from 'react';
// Import remote component dynamically across domain boundaries
const RemoteHeader = lazy(() => import('remoteApp/Header'));
function ShellApp() {
return (
<Suspense fallback="Loading Remote Header...">
<RemoteHeader />
</Suspense>
);
}💡 RemoteHeader downloads dynamically from a separate remote deployment at runtime.
Key Takeaways
- Loads remote component bundles dynamically at runtime.
- Shares singleton dependencies (
react,react-dom) to avoid duplicate script loads.
Knowledge Check
Why must react and react-dom be configured as shared singletons in Webpack Module Federation?