深入 ‘Module Federation’：在微前端架构中如何共享同一个 React 实例而避免 Context 冲突？

各位同仁，各位技术爱好者，大家好！

今天，我们将深入探讨微前端架构中的一个核心挑战：如何在不同的微前端应用之间共享同一个 React 实例，并彻底避免因多个 React 实例带来的 Context 冲突问题。这个问题在构建复杂、可伸缩的微前端系统时显得尤为重要。我们将以 Module Federation 为核心，结合实战代码，为您揭示这一问题的解决方案。

微前端架构的魅力与挑战

微前端架构，作为微服务理念在前端领域的延伸，旨在将一个巨石应用拆分成多个更小、更独立的应用。它为我们带来了诸多好处：

• 独立开发与部署： 各团队可以独立开发、测试和部署其微前端，互不影响，加快迭代速度。
• 技术栈灵活性： 不同的微前端可以使用不同的技术栈（Vue, React, Angular），允许团队根据项目需求选择最合适的工具。
• 团队自治： 团队拥有对其微前端的完全所有权，从开发到运维，提高责任感和效率。
• 增量升级： 可以逐步替换老旧模块，无需一次性重写整个应用。

然而，微前端并非没有挑战。其中一个显著的问题就是共享依赖。当多个微前端都依赖于同一个库，例如 React、ReactDOM 或一个通用组件库时，如果不加处理，每个微前端都会打包自己的副本。这会导致：

1. 包体积膨胀： 用户下载的资源总量增加，首次加载时间变长。
2. 性能下降： 多个相同库的实例可能消耗更多内存，甚至导致不必要的重复初始化。
3. 核心问题：Context 冲突： 对于 React 应用而言，这是最致命的问题。当存在多个 React 实例时，由一个 React 实例创建的 Context (React.createContext()) 无法被另一个 React 实例的 useContext() Hook 正确消费。它们认为彼此是来自不同“宇宙”的对象，导致状态无法共享，跨微前端通信受阻。

想象一下，你的主应用提供了一个认证信息 Context，但子应用却无法感知这个 Context 的值，因为子应用内部加载的是另一个独立的 React 运行时。这就是典型的 Context 冲突。

React 实例的“多重人格”问题

为了更直观地理解 Context 冲突，我们来看一个简化的例子。

假设我们有两个独立的 React 应用，App1 和 App2，它们都依赖于 React。在没有共享机制的情况下，它们的打包器（如 Webpack）会将 React 和 ReactDOM 打包到各自的 bundle 中。

App1 (独立 React 实例):

// App1/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyContext from './MyContext'; // App1 内部创建的 Context
import App1Component from './App1Component';

const App1 = () => {
  const value = 'Hello from App1 Context';
  return (
    <MyContext.Provider value={value}>
      <App1Component />
    </MyContext.Provider>
  );
};

ReactDOM.render(<App1 />, document.getElementById('app1-root'));

// App1/src/MyContext.js
import React from 'react';
const MyContext = React.createContext(null);
export default MyContext;

// App1/src/App1Component.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

const App1Component = () => {
  const contextValue = useContext(MyContext);
  console.log('App1 component context:', contextValue); // 输出: Hello from App1 Context
  return <div>App1 Component: {contextValue}</div>;
};
export default App1Component;

App2 (独立 React 实例):

// App2/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
// 注意：App2 尝试导入 App1 的 MyContext，但这是通过其自身的打包器处理的，
// 并且 App2 使用的是它自己的 React 实例
import MyContext from 'some-way-to-import-App1-context'; // 假设能导入

import App2Component from './App2Component';

const App2 = () => {
  // App2 并没有提供 MyContext，或者提供了但用的是自己的 React 实例
  return <App2Component />;
};

ReactDOM.render(<App2 />, document.getElementById('app2-root'));

// App2/src/App2Component.js
import React, { useContext } from 'react';
import MyContext from 'some-way-to-import-App1-context'; // 假设能导入

const App2Component = () => {
  const contextValue = useContext(MyContext); // 💥 问题在这里！
  // 如果 MyContext 是由 App1 的 React 实例创建的，而 useContext 是由 App2 的 React 实例调用的，
  // 它们会认为这是两个不同的 Context 对象，导致 contextValue 为 null 或默认值，而不是 App1 提供的 'Hello from App1 Context'。
  console.log('App2 component context:', contextValue); // 可能会输出: null
  return <div>App2 Component: {contextValue}</div>;
};
export default App2Component;

这种现象的根本原因在于 JavaScript 的对象引用。当 App1 的 webpack 打包 React 时，它会生成一个 React 对象的实例。当 App2 的 webpack 打包 React 时，它会生成另一个独立的 React 对象的实例。即使这两个实例在功能上完全相同，但在 JavaScript 运行时中，它们是两个不同的内存地址。

React.createContext() 返回的 Context 对象是与创建它的 React 实例紧密关联的。useContext() Hook 内部会检查它所接收的 Context 对象是否与当前 React 运行时所认识的 Context 对象匹配。如果 MyContext 是由 App1 的 React 实例创建的，而 App2 尝试使用它，但 App2 内部的 React 实例并不“认识”这个 Context 对象，就会出现问题。

为了解决这个问题，我们需要一种机制，确保在整个微前端应用中，只有一个 React 和 ReactDOM 实例被加载和运行。

Module Federation 登场：微前端的救星

Webpack 5 引入的 Module Federation（模块联邦）插件正是为解决这类共享依赖问题而设计的。它允许一个 Webpack 构建在运行时动态地从另一个 Webpack 构建中加载模块。这使得应用程序能够共享代码，甚至是整个应用程序，而无需在构建时合并它们。

Module Federation 的核心概念包括：

• Host (宿主应用): 加载其他微前端（Remote）的应用。
• Remote (远程应用): 被 Host 加载的微前端。
• Exposes (暴露): Remote 应用通过 exposes 配置向外部暴露其模块。
• Remotes (远程模块): Host 应用通过 remotes 配置声明要加载的远程应用及其入口。
• Shared (共享): 这是我们今天的主角。通过 shared 配置，Host 和 Remote 应用可以声明它们希望共享的依赖库。Module Federation 会确保这些共享库只被加载一次，并且在运行时提供给所有需要它们的微前端。

深入理解 Module Federation 的共享机制

shared 配置是 Module Federation 解决共享依赖问题的关键。它允许你指定哪些包应该被所有联邦模块共享，并且可以配置它们的加载策略。

// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ... 其他配置
  plugins: [
    new ModuleFederationPlugin({
      // ... 其他 Module Federation 配置
      shared: {
        // 声明要共享的依赖
        react: {
          singleton: true,    // 仅加载一个版本
          strictVersion: true, // 严格匹配版本
          requiredVersion: '^18.0.0', // 宿主应用所需的版本范围
        },
        'react-dom': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.0.0',
        },
        // 也可以共享其他库，如：
        // redux: {
        //   singleton: true,
        //   requiredVersion: '^4.0.0',
        // },
      },
    }),
  ],
};

让我们详细解析 shared 配置中的关键选项：

选项	类型	描述
singleton	boolean	核心选项。 如果设置为 true，Module Federation 将确保在运行时，该共享模块的只有一个实例被加载和使用。这对于像 React、ReactDOM、Redux 这样的库至关重要，因为它们内部维护着全局状态或上下文，多个实例会导致不可预测的行为或 Context 冲突。当宿主和远程应用都依赖于此模块时，只有一个版本会被加载，并被所有消费者共享。
strictVersion	boolean	如果设置为 true，Module Federation 会严格检查共享模块的版本。如果宿主应用和远程应用请求的版本不兼容，或者宿主应用没有提供该模块，远程应用将尝试加载自己的版本，或者抛出错误（取决于 eager 和 requiredVersion 的配置）。这有助于避免因版本不匹配导致的问题。
requiredVersion	string	指定此共享模块所需的版本范围（遵循 npm 的 semver 规范，如 ^18.0.0, ~18.2.0, 18.2.0）。Module Federation 会根据这个范围来决定是否使用宿主应用提供的共享模块，或者加载自己的版本。
eager	boolean	如果设置为 true，该共享模块会在启动时立即加载，而不是在需要时才懒加载。对于像 React 这样的基础库，通常不需要设置为 true，因为它们通常会被主入口文件导入。但对于某些需要立即初始化或具有副作用的共享库，可能需要设置为 true。设置 eager: true 意味着即便在远程应用中没有显式导入，此共享模块也会被提前加载。
shareScope	string	定义共享模块的作用域名称。默认是 default。允许多个独立的共享作用域，例如，如果你希望某些模块只在特定的一组微前端之间共享，而不是全局共享。
import	string	当共享模块作为 singleton 且宿主没有提供时，远程应用将尝试从这里导入。通常不需要设置，因为默认行为是导入模块本身。
version	string	指定当前应用提供的共享模块的版本。当作为宿主时，这个版本会被提供给远程应用。

为什么 singleton: true 对 React 至关重要？

singleton: true 是解决 React Context 冲突问题的核心。当 Module Federation 看到 singleton: true 配置时，它会执行以下逻辑：

1. 第一次加载： 当宿主应用或第一个需要 react 的远程应用被加载时，Module Federation 会加载 react 的一个版本（通常是宿主应用提供的版本，如果版本兼容）。
2. 注册到共享作用域： 这个加载的 react 实例会被注册到 Module Federation 的内部共享作用域中，并标记为单例。
3. 后续请求： 任何其他需要 react 的远程应用在加载时，Module Federation 会检查共享作用域。如果已经存在一个 react 的单例实例，并且版本兼容，那么它将直接使用这个已存在的实例，而不是加载自己的副本。
4. 确保唯一性： 这样就保证了在整个微前端应用中，所有的 React 组件、Hooks 和 Context API 都指向同一个 React 运行时对象。由这个唯一的 React 实例创建的 Context (React.createContext())，自然也就能被所有使用这个唯一 React 实例的组件 (useContext()) 正确消费。

实战演练：共享 React 实例与避免 Context 冲突

现在，让我们通过一个实际的例子来演示如何配置 Module Federation 以共享 React 实例并解决 Context 冲突。

我们将构建一个简单的微前端系统：

• Host (宿主应用): 提供一个共享的 React Context，并加载两个远程应用。
• Remote1 (远程应用1): 消费 Host 提供的 Context，并显示其内容。
• Remote2 (远程应用2): 消费 Host 提供的 Context，并显示其内容。

1. 项目结构

├── host/
│   ├── package.json
│   ├── webpack.config.js
│   └── src/
│       ├── bootstrap.js
│       ├── index.js
│       └── components/
│           └── SharedContext.js
├── remote1/
│   ├── package.json
│   ├── webpack.config.js
│   └── src/
│       ├── bootstrap.js
│       ├── index.js
│       └── components/
│           └── Remote1Component.js
├── remote2/
│   ├── package.json
│   ├── webpack.config.js
│   └── src/
│       ├── bootstrap.js
│       ├── index.js
│       └── components/
│           └── Remote2Component.js

2. package.json 配置（Host, Remote1, Remote2 类似）

为了简化，我们将使用相同的 React 和 Webpack 版本。

// host/package.json
{
  "name": "host-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack serve --port 3000"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

// remote1/package.json (与 host 类似，只需修改 name)
// remote2/package.json (与 host 类似，只需修改 name)

3. webpack.config.js 配置

host/webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3000,
    open: true,
  },
  output: {
    publicPath: 'http://localhost:3000/', // 宿主应用的公共路径
  },
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host', // 宿主应用的名称
      remotes: {
        // 声明要加载的远程应用及其入口
        remote1: 'remote1@http://localhost:3001/remoteEntry.js',
        remote2: 'remote2@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        // 核心配置：共享 React 和 ReactDOM
        react: {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0', // 宿主应用提供的 React 版本
        },
        'react-dom': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0', // 宿主应用提供的 ReactDOM 版本
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html', // HTML 模板
    }),
  ],
};

remote1/webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3001,
    open: true,
  },
  output: {
    publicPath: 'http://localhost:3001/', // 远程应用1的公共路径
  },
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote1', // 远程应用1的名称
      filename: 'remoteEntry.js', // 远程应用的入口文件名
      exposes: {
        './Remote1Component': './src/components/Remote1Component', // 暴露组件
      },
      shared: {
        // 核心配置：共享 React 和 ReactDOM
        // 注意：远程应用只需要声明它需要共享的库，Module Federation 会自动处理版本和单例逻辑
        react: {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

remote2/webpack.config.js (与 remote1 类似，只需修改 port 和 name):

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3002,
    open: true,
  },
  output: {
    publicPath: 'http://localhost:3002/',
  },
  module: {
    rules: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react'],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remote2',
      filename: 'remoteEntry.js',
      exposes: {
        './Remote2Component': './src/components/Remote2Component',
      },
      shared: {
        react: {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
        'react-dom': {
          singleton: true,
          strictVersion: true,
          requiredVersion: '^18.2.0',
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

4. React 组件和 Context

host/src/components/SharedContext.js: (宿主应用创建并提供 Context)

import React from 'react';

// 宿主应用创建的 Context
export const AppContext = React.createContext({
  user: null,
  theme: 'light',
  updateUser: () => {},
  updateTheme: () => {},
});

// 宿主应用提供 Context Provider
export const AppContextProvider = ({ children }) => {
  const [user, setUser] = React.useState({ name: 'Guest' });
  const [theme, setTheme] = React.useState('light');

  const updateUser = (newUser) => setUser(newUser);
  const updateTheme = (newTheme) => setTheme(newTheme);

  const contextValue = React.useMemo(() => ({
    user,
    theme,
    updateUser,
    updateTheme,
  }), [user, theme]);

  // 关键点：这里使用的 React 是宿主应用的 React 实例，也是唯一共享的实例
  console.log('Host AppContext created with React instance:', React);

  return (
    <AppContext.Provider value={contextValue}>
      {children}
    </AppContext.Provider>
  );
};

host/src/index.js: (宿主应用的主入口)

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import { AppContextProvider } from './components/SharedContext'; // 导入 Context Provider

// 动态导入远程组件
const Remote1Component = React.lazy(() => import('remote1/Remote1Component'));
const Remote2Component = React.lazy(() => import('remote2/Remote2Component'));

function App() {
  // 关键点：Host 包装了 AppContextProvider
  return (
    <AppContextProvider>
      <div style={{ padding: '20px', border: '1px solid blue', margin: '10px' }}>
        <h1>Host Application</h1>
        <p>This is the main host. It provides a shared context.</p>

        <Suspense fallback={<div>Loading Remote 1...</div>}>
          <Remote1Component />
        </Suspense>

        <Suspense fallback={<div>Loading Remote 2...</div>}>
          <Remote2Component />
        </Suspense>
      </div>
    </AppContextProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// 验证 React 实例是否唯一 (可选，用于调试)
// window.sharedReactInstance = React;
// console.log('Host React instance:', React);

remote1/src/components/Remote1Component.js: (远程应用1消费 Context)

import React, { useContext } from 'react';
// 远程应用1需要导入宿主应用暴露的 Context
// 在 Module Federation 中，如果 Context 是由共享的 React 实例创建的，
// 并且在宿主应用中通过 props 或其他方式传递，或者像这里通过全局导入约定，
// 那么它将能被正确消费。
// 注意：这里我们假设 AppContext 是通过某种方式（例如，宿主将其暴露为远程模块，或者约定它在共享作用域中）可访问的。
// 最直接的方式是 Host 将 AppContext 暴露，或者如本例所示，远程应用直接从 Host 的共享目录中获取。
// 简便起见，我们假设远程应用知道如何导入宿主提供的 Context。
// 实际生产中，你可能会将共享 Context 放在一个独立的共享库中，并通过 MF 共享该库。
// 或者，Host 直接将 Context 对象作为 prop 传递给远程组件。
// 这里为了演示“共享 React 实例”如何解决 Context 冲突，我们直接从宿主的源文件导入
// 但在实际部署中，远程应用不应该直接导入宿主应用的源文件。
// 更实际的方法是宿主将 AppContext 暴露出来，或者将其放在一个共享的 utils 包中。
// 为了简化演示，我们这里直接从假定的 host 的共享路径导入。
// 假设宿主暴露了 AppContext：
// const { AppContext } = await import('host/AppContext');
// 为了运行这个演示，我们模拟 AppContext 的结构，或者在 Host 中将其暴露。
// 为了演示，我们假设远程应用能够通过某种机制获取到那个由宿主 React 实例创建的 AppContext。
// 最简单的模拟方式是，Host 将 AppContext 作为一个 prop 传递给 remote。
// 但本例旨在演示“共享 React 实例”解决“App2 的 useContext 无法识别 App1 的 createContext”的问题。
// 所以我们假设 Remote1 有办法拿到 Host 提供的 AppContext 引用。

// 实际运行时，由于 React 实例是单例的，只要 AppContext 是由这个单例 React 实例创建的，
// 那么无论在哪个微前端中，只要能获取到 AppContext 的引用，就能正确消费。
// 这里为了演示，我们直接导入宿主提供的 Context，
// 这需要宿主应用也暴露 AppContext，或者将其打包进一个公共库。
// 为了简单，我们直接在远程应用中声明一个同名 Context，并假定它在运行时会被宿主提供的 Context 覆盖（如果它们都是来自同一个 React 实例）。
// 更严谨的做法是 Host 显式暴露 AppContext。
// 为了让示例可运行，我们需要让 Remote 应用能够“看到” Host 的 AppContext。
// 一种方式是 Host 暴露 `SharedContext.js`。
// host/webpack.config.js 中添加:
// exposes: {
//   './AppContext': './src/components/SharedContext',
// },
// 然后 Remote 导入:
// const { AppContext } = React.lazy(() => import('host/AppContext'));
// 这样做会让 AppContext 成为一个 Module Federation 模块，而不是纯粹的共享依赖。
// 但对于 React Context，我们更关心的是 React 实例的共享。
// 所以，我们假设 Remote 能够拿到 Host 提供的 AppContext 实例。

// 再次强调，核心是 React 实例的唯一性。
// 假设我们能拿到宿主提供的 AppContext 引用。
// 这里直接从宿主应用的源文件导入，这在真实场景中不推荐，应该通过 Module Federation 暴露或共享库。
// 为了演示目的，我们直接模拟宿主 Context 的结构，并相信共享的 React 实例会使其工作。
// 实际运行时，宿主已经提供了 AppContext.Provider，远程应用只需要 `useContext(AppContext)`。
// 最简单的模拟方式是，让远程应用自己定义一个同名的 AppContext，
// 但在 Module Federation 和单例 React 的作用下，它会和宿主的 AppContext 共享同一个 React 实例。

// 为了简化并能实际运行，我们让宿主暴露出 AppContext。
// 宿主 webpack.config.js 的 exposes 中添加：
// exposes: {
//   './AppContextProvider': './src/components/SharedContext',
//   './AppContext': './src/components/SharedContext', // 暴露 AppContext 对象本身
// },

// 远程应用导入：
import { AppContext } from 'host/AppContext'; // 假设宿主暴露了 AppContext

const Remote1Component = () => {
  // 关键点：这里使用的 useContext 是宿主应用的 React 实例提供的，也是唯一共享的实例
  const { user, theme, updateUser, updateTheme } = useContext(AppContext);
  console.log('Remote1 component consumed Context with React instance:', React);

  return (
    <div style={{ padding: '15px', border: '1px solid green', margin: '10px' }}>
      <h2>Remote 1 Component</h2>
      <p>User: {user.name}</p>
      <p>Theme: {theme}</p>
      <button onClick={() => updateUser({ name: 'Jane Doe' })}>Update User in Host</button>
      <button onClick={() => updateTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
    </div>
  );
};

export default Remote1Component;

remote2/src/components/Remote2Component.js: (远程应用2消费 Context)

import React, { useContext } from 'react';
import { AppContext } from 'host/AppContext'; // 假设宿主暴露了 AppContext

const Remote2Component = () => {
  // 关键点：这里使用的 useContext 也是宿主应用的 React 实例提供的
  const { user, theme } = useContext(AppContext);
  console.log('Remote2 component consumed Context with React instance:', React);

  return (
    <div style={{ padding: '15px', border: '1px solid orange', margin: '10px' }}>
      <h2>Remote 2 Component</h2>
      <p>User from Host Context: {user.name}</p>
      <p>Theme from Host Context: {theme}</p>
    </div>
  );
};

export default Remote2Component;

为了让 remote1 和 remote2 能够导入 host/AppContext，我们需要修改 host/webpack.config.js，在 exposes 中添加：

// host/webpack.config.js
// ...
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remote1: 'remote1@http://localhost:3001/remoteEntry.js',
    remote2: 'remote2@http://localhost:3002/remoteEntry.js',
  },
  exposes: { // 宿主应用暴露 AppContext
    './AppContext': './src/components/SharedContext',
  },
  shared: {
    react: { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
    'react-dom': { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
  },
}),
// ...

5. public/index.html (Host, Remote1, Remote2 类似)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Micro Frontend</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

6. 运行项目

1. 在 remote1 目录下运行 npm start (或 webpack serve --port 3001)。
2. 在 remote2 目录下运行 npm start (或 webpack serve --port 3002)。
3. 在 host 目录下运行 npm start (或 webpack serve --port 3000)。

打开 http://localhost:3000。

预期结果：

• 你将看到 Host 应用、Remote 1 和 Remote 2 的内容。
• Remote 1 和 Remote 2 都能正确显示 Host 应用提供的 user.name (Guest) 和 theme (light)。
• 点击 Remote 1 中的 "Update User in Host" 按钮，Host 和 Remote 2 显示的 User 名称也会同步更新为 "Jane Doe"。
• 点击 Remote 1 中的 "Toggle Theme" 按钮，Host 和 Remote 2 显示的 Theme 也会同步更新。
• 打开开发者工具的控制台，你会看到 Host AppContext created with React instance: ... 和 Remote1 component consumed Context with React instance: ... 以及 Remote2 component consumed Context with React instance: ...。如果仔细观察，你会发现这些 React 实例的引用是同一个对象。

这证明了：通过 Module Federation 的 shared 配置，特别是 singleton: true，我们成功地使所有微前端共享了同一个 React 运行时实例。因此，由该唯一 React 实例创建的 Context 也能在所有微前端中无缝共享和消费，完美解决了 Context 冲突问题。

超越 React 实例：更高级的共享策略

Module Federation 的共享能力远不止 React 实例。有了 singleton: true 和 shared 配置，我们可以构建更强大的微前端系统。

共享 Hooks 和工具库

除了 React 本身，许多自定义 Hooks 或工具函数库也需要被所有微前端共享，以确保逻辑一致性和减少重复代码。

例如，一个用于身份验证的 useAuth Hook，或一个格式化日期的 formatDate 工具函数。

host/webpack.config.js (或一个单独的 shared-utils 微前端):

// ...
shared: {
  // ... react, react-dom
  'some-ui-library': { // 如果你使用 Ant Design, Material UI 等
    singleton: true,
    requiredVersion: '^5.0.0',
  },
  'lodash': {
    singleton: true,
    requiredVersion: '^4.0.0',
  },
},
// ...

或者，如果你想共享自己编写的 Hooks：

你可以创建一个单独的微前端，专门用于暴露这些共享的 Hooks 和工具函数。

shared-hooks/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'shared_hooks',
      filename: 'remoteEntry.js',
      exposes: {
        './useAuth': './src/hooks/useAuth',
        './useLogger': './src/hooks/useLogger',
        './utils': './src/utils/index',
      },
      shared: {
        react: { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
        // 如果你的 hooks 依赖其他共享库，也要在这里声明
      },
    }),
  ],
};

host/webpack.config.js:

// ...
remotes: {
  // ... remote1, remote2
  shared_hooks: 'shared_hooks@http://localhost:3003/remoteEntry.js',
},
// ...

在任何微前端中使用：

import { useAuth } from 'shared_hooks/useAuth';
import { formatDate } from 'shared_hooks/utils';

const MyComponent = () => {
  const { user, login, logout } = useAuth();
  const today = formatDate(new Date());
  // ...
};

共享状态管理库 (Redux/Zustand/Jotai)

对于全局状态管理库，如 Redux、Zustand 或 Jotai，singleton: true 同样至关重要。这些库通常会创建一个单一的 store 实例来管理应用状态。如果存在多个实例，每个微前端都会有自己的 store，导致状态不同步。

// webpack.config.js (所有需要共享 Redux 的微前端)
// ...
shared: {
  // ... react, react-dom
  redux: {
    singleton: true,
    strictVersion: true,
    requiredVersion: '^4.0.0',
  },
  'react-redux': {
    singleton: true,
    strictVersion: true,
    requiredVersion: '^8.0.0',
  },
  // 如果使用 Redux Toolkit
  '@reduxjs/toolkit': {
    singleton: true,
    strictVersion: true,
    requiredVersion: '^1.0.0',
  },
  // 如果使用 Zustand
  'zustand': {
    singleton: true,
    strictVersion: true,
    requiredVersion: '^4.0.0',
  },
},
// ...

然后，你可以将 Redux store 本身（或者 Zustand 的 create 函数）通过 Module Federation 暴露出来，或者在 Host 应用中初始化 store 并通过 Context 传递。最佳实践通常是 Host 应用创建并提供 Redux store，而远程应用通过 react-redux 的 useSelector 和 useDispatch Hooks 来访问这个共享的 store。

共享组件库

如果你有一个统一的 UI 组件库，也可以通过 Module Federation 共享它们。

ui-components/webpack.config.js:

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'ui_components',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
        './Input': './src/components/Input',
        './Card': './src/components/Card',
        // 暴露整个组件库的入口
        './index': './src/index',
      },
      shared: {
        react: { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, strictVersion: true, requiredVersion: '^18.2.0' },
        // 如果组件库依赖其他共享库，也要在这里声明
        'styled-components': { singleton: true, requiredVersion: '^6.0.0' },
      },
    }),
  ],
};

在其他微前端中使用：

import Button from 'ui_components/Button';
import { Card } from 'ui_components'; // 导入整个库的导出

const MyComponent = () => (
  <div>
    <Button onClick={() => alert('Clicked!')}>Click Me</Button>
    <Card title="Hello MF">This is a card from shared UI library.</Card>
  </div>
);

处理版本冲突与回滚策略

尽管 singleton: true 和 strictVersion: true 提供了强大的版本控制，但仍然需要考虑版本冲突的可能性。

• strictVersion: true 的严格性： 当宿主和远程应用对共享模块的版本要求不兼容时，Module Federation 可能会阻止远程应用加载，或导致其加载自己的私有版本（如果配置允许）。对于 React 这样的库，版本不兼容通常会导致运行时错误。
• 版本管理策略：
  • 语义化版本控制 (SemVer): 严格遵循 SemVer 规范（MAJOR.MINOR.PATCH）。
  • 统一版本： 对于核心共享库（如 React），尽量在所有微前端中使用完全相同的版本。这可以通过 Monorepo 统一管理 package.json 中的依赖版本来实现。
  • 宿主优先： 通常，宿主应用提供的共享库版本具有最高优先级。所有远程应用都应与宿主应用兼容。
  • 兼容性测试： 在部署前，务必进行全面的集成测试，确保所有微前端在共享依赖的情况下都能正常工作。
• 回滚策略：
  • 如果发现版本冲突导致运行时错误，应有能力快速回滚到上一个稳定版本。
  • 利用 CI/CD 管道进行自动化部署和回滚。
  • 可以考虑在 shared 配置中使用 requiredVersion: false 或更宽松的版本范围 (*)，但这会增加运行时风险，仅在特殊情况下使用。

最佳实践与注意事项

1. 始终共享 React 和 ReactDOM： 对于任何基于 React 的微前端架构，将 react 和 react-dom 配置为 singleton: true 是绝对必要的。
2. 明确所有权和职责： 哪个微前端负责提供哪些共享模块？谁负责维护这些模块的版本？明确这些可以避免混乱。
3. 合理规划共享范围： 不是所有东西都应该共享。只共享那些真正需要单例实例或在多个微前端中频繁使用的核心依赖和功能。过度共享会导致系统紧耦合。
4. 注意 eager 选项： 仅在必要时使用 eager: true。例如，如果一个共享库必须在其他模块加载之前立即初始化。对于 React/ReactDOM，通常不需要 eager: true，因为它们通常是入口点直接依赖的。
5. 严格版本控制： 使用 strictVersion: true 和 requiredVersion 来确保版本兼容性。这能有效防止因版本不一致导致的运行时错误。
6. 懒加载远程组件： 始终使用 React.lazy 和 Suspense 来懒加载远程组件。这可以提高应用的初始加载性能。
7. 错误边界 (Error Boundaries)： 在宿主应用中为远程组件设置错误边界，以防止某个远程组件的崩溃影响整个应用。
8. 运行时性能监控： 监控微前端应用的运行时性能，包括网络请求、内存使用和 CPU 占用，以确保共享机制没有引入新的性能瓶颈。
9. 开发体验： 确保开发环境配置合理，支持热模块替换（HMR），并且调试工具能正常工作。

展望未来：微前端与 Module Federation 的演进

Module Federation 极大地简化了微前端架构中共享依赖的复杂性，尤其是在解决 React 实例冲突和 Context 共享方面提供了优雅的解决方案。随着前端生态的不断发展，我们可以预见 Module Federation 将持续演进，提供更细粒度的控制、更智能的版本协调以及更强大的运行时能力。未来的微前端架构将更加灵活、高效，而 Module Federation 无疑将是其核心驱动力之一。

总结

Module Federation 通过其强大的 shared 配置，特别是 singleton: true 选项，为微前端架构中的 React 实例共享提供了完美的解决方案。它确保了整个应用中只有一个 React 运行时，从而彻底避免了 Context 冲突，并实现了跨微前端的状态无缝共享。理解和正确应用这些机制，是构建健壮、高性能微前端系统的基石。