English

Module Federation

Module Federation is an architectural pattern for the decentralization of JavaScript applications (similar to microservices on the server-side). It allows you to share code and resources among multiple JavaScript applications (or micro-frontends).

The Rspack team worked closely with the Module Federation development team, and provides first-class support for the Module Federation.

Use case

Module Federation has some typical use cases, including:

Allow independent applications (known as "microfrontends" in microfrontend architecture) to share modules without the need to recompile the entire application.
Distributed teams to work on different parts of the same application without the need to recompile the entire application.
Dynamic code loading and sharing between applications during runtime

Module Federation can help you:

Reduce code duplication
Improve code maintainability
Lower the overall size of your applications
Enhance the performance of your applications

How to use

There are currently two main versions of Module Federation, you can choose one to use:

Module Federation v1.5

This version is natively supported in Rspack. In addition to supporting module export, module loading, and dependency sharing capabilities of Module Federation v1.0, it also adds runtime plugin functionality, allowing users to extend the behavior and functionality of module federation.

You can use it through Rsbuild's moduleFederation.options, no need to install any plugins.

rsbuild.config.ts

export default defineConfig({
  moduleFederation: {
    options: {
      name: 'remote',
      // other options
    },
  },
});

Module Federation v2.0

This is the enhanced version of Module Federation. Based on Module Federation v1.5, it provides some additional features out of the box, such as dynamic type hints and manifest, etc. These features make Module Federation more suitable for supporting micro-front-end architecture of large web applications.

You need to install the additional @module-federation/enhanced plugin to use Module Federation v2.0.

rsbuild.config.ts

import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'provider',
          // other options
        }),
      ]);
    },
  },
});

Please refer to the Module Federation v2.0 documentation for details usage.

Example Repositories

Rsbuild has provided some example projects of Module Federation, you can refer to:

ON THIS PAGE

Module Federation#

Use case#

How to use#

Module Federation v1.5#