Module Federation

Module Federation is a revolutionary architecture introduced in Webpack 5 that enables multiple JavaScript applications to dynamically share code, components, and dependencies at runtime. Unlike traditional micro-frontend approaches, Module Federation eliminates the need to recompile the host application when a remote module changes, providing true independence between development teams.

Fundamentals

• Dynamically loads modules from remote applications via HTTP
• Automatically shares common dependencies to avoid duplication
• Enables bidirectional integration: an app can be both host and remote simultaneously
• Works at the bundler level, invisible to application code

Benefits

• Independent deployment: each micro-frontend can be deployed without impacting others
• Drastic bundle size reduction through dependency sharing
• Organizational scalability: autonomous teams with their own release cycles
• Performance improvements: on-demand loading of features
• Technological flexibility: each module can use different framework versions

Practical Example

Consider an e-commerce architecture where the main application (shell) dynamically loads the cart module from a remote application:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        cart: 'cart@http://localhost:3001/remoteEntry.js',
        checkout: 'checkout@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' }
      }
    })
  ]
};

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'cart',
      filename: 'remoteEntry.js',
      exposes: {
        './CartWidget': './src/components/CartWidget',
        './CartPage': './src/pages/CartPage'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

import React, { lazy, Suspense } from 'react';

// Dynamic loading of remote module
const CartWidget = lazy(() => import('cart/CartWidget'));
const CheckoutFlow = lazy(() => import('checkout/CheckoutFlow'));

export default function App() {
  return (
    <div>
      <header>
        <h1>My E-commerce</h1>
        <Suspense fallback={<div>Loading...</div>}>
          <CartWidget />
        </Suspense>
      </header>
      <main>
        <Suspense fallback={<div>Loading checkout...</div>}>
          <CheckoutFlow />
        </Suspense>
      </main>
    </div>
  );
}

Implementation

1. Configure ModuleFederationPlugin in webpack.config.js for each application
2. Define modules to expose (exposes) in remote applications
3. Declare remotes in the host application with their URLs
4. Configure dependency sharing with singleton strategy for UI libraries
5. Implement error handling for failed remote module loads
6. Set up a versioning system to manage compatibility between modules
7. Deploy each application on different domains/ports
8. Configure CORS if necessary to allow cross-origin loading

Related Tools

• Webpack 5+: native bundler supporting Module Federation
• Rspack: ultra-fast Rust bundler compatible with Module Federation
• Nx: monorepo tooling with integrated support for federated architectures
• Module Federation Dashboard: visualization of dependencies between modules
• Vite with @originjs/vite-plugin-federation: alternative for Vite
• Single-SPA: complementary micro-frontend framework

Module Federation radically transforms the architecture of large-scale front-end applications by enabling true team autonomy while maintaining a cohesive user experience. For organizations with multiple front-end teams, this technology significantly reduces time-to-market and coordination costs while improving long-term maintainability. The initial investment in configuration is quickly offset by the organizational and technical flexibility it provides.