JavaScript面试Module Federation实现原理详解

前言

Module Federation是Webpack5中的一个新功能，它可以让多个独立的Webpack构建之间共享模块。在微服务和跨团队开发中，它非常有用。本文将详细介绍Module Federation的实现原理和使用方法。

Module Federation实现原理

Module Federation的实现原理是将每个独立Webpack构建的运行时（runtime）代码提取到一个公共运行时文件中。这个公共运行时文件包含了所有Webpack构建的运行时代码，包括模块加载和分片加载等功能。

具体来说，当一个Webpack构建需要加载一个来自另一个Webpack构建的模块时，它会从公共运行时文件中获取一个远程模块加载器，然后利用这个远程模块加载器去加载远程模块。由于公共运行时文件中已经包含了所有的Webpack构建的运行时代码，所以可以保证远程模块的正确加载。这就实现了多个独立Webpack构建共享模块的目的。

Module Federation使用方法

在webpack.config.js中配置module federation的步骤如下：

1. 在当前Webpack构建中设置exposes参数，指定当前Webpack构建的暴露的模块。

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      exposes: {
        "./Button": "./src/Button",
      },
    }),
  ],
};

1. 在需要加载其他Webpack构建中的模块的Webpack构建配置中使用remotes参数来指定需要加载的远程模块。

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      remotes: {
        app1: "app1@https://example.com/app1/remoteEntry.js",
      },
    }),
  ],
};

示例说明

我们来看一个具体的例子，假设我们有两个独立的Webpack构建，分别是App1和App2。App1中有一个Button组件，App2中需要加载这个Button组件。

示例一

首先在App1中定义一个Button组件：

// src/Button.js
import React from "react";

export default function Button(props) {
  return <button>{props.children}</button>;
}

在App1的webpack.config.js中使用exposes参数暴露这个Button组件：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      exposes: {
        "./Button": "./src/Button",
      },
    }),
  ],
};

在App2的webpack.config.js中使用remotes参数加载App1的远程模块：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      remotes: {
        app1: "app1@https://example.com/app1/remoteEntry.js",
      },
    }),
  ],
};

然后在App2中使用App1中的Button组件：

// src/App.js
import Button from "app1/Button";

export default function App() {
  return <Button>Click me!</Button>;
}

这里需要注意的是，为了加载App1中的Button组件，我们需要使用app1/Button来指定远程模块和其组件路径。

示例二

我们还可以实现跨多个Webpack构建的模块共享。比如，我们有三个独立的Webpack构建：App1，App2和App3。其中App1中有一个Button组件，App2加载了App1的Button组件，App3需要同时加载App1和App2的模块。

首先，在App1中定义Button组件：

// src/Button.js
import React from "react";

export default function Button(props) {
  return <button>{props.children}</button>;
}

在App1的webpack.config.js中使用exposes参数暴露这个Button组件：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      exposes: {
        "./Button": "./src/Button",
      },
    }),
  ],
};

然后在App2中使用App1中的Button组件：

// src/App.js
import Button from "app1/Button";

export default function App() {
  return <Button>Click me!</Button>;
}

在App2的webpack.config.js中使用remotes参数加载App1的远程模块：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      remotes: {
        app1: "app1@https://example.com/app1/remoteEntry.js",
      },
    }),
  ],
};

接下来，我们需要在App3中同时加载App1和App2的模块。做法是，在App1和App2的webpack.config.js中都使用shared参数来指定需要共享的模块：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
      exposes: {
        "./Button": "./src/Button",
      },
    }),
  ],
};

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      remotes: {
        app1: "app1@https://example.com/app1/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

然后，在App3的webpack.config.js中使用remotes参数加载远程模块：

// webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app3",
      remotes: {
        app1: "app1@https://example.com/app1/remoteEntry.js",
        app2: "app2@https://example.com/app2/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

这样，在App3中就可以同时使用App1和App2中的模块了。

总结

Module Federation是Webpack5中的一个非常有用的功能，可以实现多个独立Webpack构建之间的模块共享。本文对Module Federation的实现原理和使用方法进行了详细的讲解，并通过多个示例进行了说明，希望能够帮助大家更好地理解和使用这个功能。