模块联邦#

模块联邦是一种用于 JavaScript 应用程序分解的架构模式（类似于服务器端的微服务），它允许您在多个 JavaScript 应用程序（或微前端）之间共享代码和资源。

Rspack 团队与模块联邦开发团队密切合作，并为模块联邦提供一流的支持。

用例#

模块联邦有几个典型的用例，包括

• 允许独立的应用程序（在微前端架构中称为“微前端”）共享模块，而无需重新编译整个应用程序。
• 不同的团队可以处理同一个应用程序的不同部分，而无需重新编译整个应用程序。
• 在运行时动态加载和共享应用程序之间的代码。

模块联邦可以帮助您

• 减少代码重复
• 提高代码可维护性
• 减少应用程序的总体大小
• 提高应用程序性能

如何使用#

模块联邦 (MF) 目前有多个主要版本，您可以根据需要选择一个。

以下是一些版本的特性

模块联邦 v2.0#

模块联邦 2.0 基于模块联邦提供了一些额外的开箱即用功能，例如动态 TS 类型提示、Chrome Devtools、运行时插件、预加载，使模块联邦更适合支持大型 Web 应用程序的微前端架构。模块联邦 v2.0 基于 v1.5 实现。

您需要安装额外的 @module-federation/enhanced 插件才能使用模块联邦 v2.0。

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

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

有关具体用法详细信息，请参阅 模块联邦 v2.0 官方文档。

模块联邦 v1.5#

这是内置于 Rspack 的版本。除了支持模块联邦 v1.0 的模块导出、模块加载和依赖项共享功能外，它还添加了运行时插件功能，允许用户扩展模块联邦的行为和功能。

您可以通过 Rspack 的 ModuleFederationPlugin 使用它，无需安装任何额外的插件。

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

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

参考：模块联邦 v1.5 示例。

模块联邦 v1.0#

此版本是为了与 webpack.container.ModuleFederationPlugin 兼容而实现的。

您可以通过 Rspack 的 ModuleFederationPluginV1 使用它。