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 several versions of Module Federation, you can choose one to use:

Module Federation v1.0#

This version was implemented for compatibility with the webpack.container.ModuleFederationPlugin.

You can use it through Rspack's ModuleFederationPluginV1.

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 with Rspack's ModuleFederationPlugin, no need to install any plugins.

const rspack = require('@rspack/core');

module.exports = {
  output: {
    // set uniqueName explicitly to make HMR work
    uniqueName: 'app',
  },
  plugins: [
    new rspack.container.ModuleFederationPlugin({
      // options
    }),
  ],
};

Refer to: Module Federation v1.5 Example.

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.

const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/rspack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // options
    }),
  ],
};

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