Module Federation

Module Federation is an architectural pattern for JavaScript application decomposition (similar to microservices on the server-side), allowing you to share code and resources between multiple JavaScript applications (or micro-frontends).

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

Use cases

Module Federation has several typical use cases, including:

• Allowing independent applications (called "micro-frontends" in micro-frontend architecture) to share modules without recompiling the entire application.
• Different teams working on different parts of the same application without needing to recompile the entire application.
• Dynamic code loading and sharing between applications at runtime.

Module Federation can help you:

• Reduce code duplication
• Improve code maintainability
• Reduce the overall size of applications
• Improve application performance

How to use

Module Federation (MF) currently has multiple major versions, and you can choose one based on your needs.

Here are the characteristics of several versions:

• Implemented based on Module Federation v1.5 | - Provides additional out-of-the-box features such as dynamic TS type hints, Chrome Devtools, preloading, etc.
• More suitable for micro-frontend architecture supporting large-scale Web applications
• Includes all features of Module Federation 1.5 | Projects that need to use advanced capabilities of Module Federation 2.0 | | <a href="#module-federation-v15">MF v1.5</a> | Version built into Rspack | - Supports module export, module loading, dependency sharing capabilities of Module Federation v1.0
• Added runtime plugin functionality, allowing users to extend the behavior and functionality of module federation | Projects that don't need to use the extra capabilities of Module Federation 2.0 | | <a href="#module-federation-v10">MF v1.0</a> | Version implemented based on webpack.container.ModuleFederationPlugin | - No longer being iterated
• We recommend using Module Federation v1.5 or v2.0 versions | Projects migrating from webpack to Rspack and wanting to keep the logic as consistent as possible with the original |

Module Federation v2.0

Module Federation 2.0 provides some additional out-of-the-box features based on Module Federation, such as dynamic TS type hints, Chrome devtools, Runtime plugins, preloading, making Module Federation more suitable for micro-frontend architecture supporting large-scale Web applications. Module Federation v2.0 is implemented based on v1.5.

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

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

export default {
  plugins: [
    new ModuleFederationPlugin({
      // options
    }),
  ],
};

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

Module Federation v1.5

This is the version built into Rspack. In addition to supporting Module Federation v1.0's capabilities such as module export, module loading, and dependency sharing, it also adds runtime plugin functionality, allowing users to extend the behavior and functionality of module federation.

In Rspack 2.0, ModuleFederationPlugin also further improves shared dependency Tree Shaking. You can use shared.treeShaking to optimize shared dependencies based on actual usage. For related options, see ModuleFederationPlugin.

You can use it through Rspack's ModuleFederationPlugin without installing any additional plugins.

import { rspack } from '@rspack/core';

export default {
  output: {
    // set uniqueName explicitly to make HMR works
    uniqueName: 'app',
  },
  plugins: [
    new rspack.container.ModuleFederationPlugin({
      // options
    }),
  ],
};

Reference: Module Federation v1.5 example.

Module Federation v1.0

This version is implemented for compatibility with webpack.container.ModuleFederationPlugin.

You can use it through Rspack's ModuleFederationPluginV1.

:::tip Module Federation v1.0 is no longer being iterated on, we recommend using Module Federation v1.5 or v2.0 versions. :::