如何使用 Webpack ModuleFederationPlugin 构建微前端架构

前言

在前端开发中，构建和部署大型应用程序变得越来越复杂。为了更好地管理这些复杂性，模块联邦（Module Federation）作为 Webpack 5 的一部分应运而生。模块联邦允许我们将应用程序拆分为多个独立的、可共享的微前端（micro frontends），从而实现更灵活的代码共享和加载。本文将详细讲解如何使用 ModuleFederationPlugin，帮助你轻松驾驭这一强大工具，从而构建高性能、易维护的大型前端应用。

什么是模块联邦（Module Federation）？

模块联邦是一种实现微前端架构的方法，它允许我们在多个独立的应用程序之间共享代码。通过模块联邦，我们可以动态加载远程模块，而不需要在构建时将它们打包在一起。

优点

代码共享：不同的应用程序可以共享相同的代码库，如组件、库等，从而减少重复代码。
独立部署：每个应用程序可以独立开发、测试和部署，而不需要重新构建整个系统。
优化性能：按需加载模块，减少初始加载时间，提高应用程序性能。

基本概念

要理解模块联邦，让我们先熟悉几个基本概念：

Host（主应用）：调用远程模块的一方。
Remote（远程应用）：被调用的一方，提供模块的应用。
Exposes（暴露）：远程应用中被共享的模块。
Shared（共享）：在主应用和远程应用之间共享的依赖。

使用步骤

1. 设置主应用（Host Application）

首先，我们需要在主应用的 webpack.config.js 中添加 ModuleFederationPlugin 配置。

clike 复制代码

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        remote: "remote@http://localhost:3001/remoteEntry.js"
      },
      shared: ["react", "react-dom"]
    })
  ]
};

以上配置中，name 是主应用的名称，remotes 中定义了远程应用的名称和入口文件（remoteEntry.js），shared 是共享的依赖。

2. 设置远程应用（Remote Application）

接着，我们在远程应用的 webpack.config.js 中进行类似的配置。

clike 复制代码

const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "remote",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button"
      },
      shared: ["react", "react-dom"]
    })
  ]
};

在这个配置中，name 是远程应用的名称，filename 是远程入口文件名，exposes 中定义了暴露的模块路径。

3. 运行并测试

配置完成后，我们可以分别运行主应用和远程应用。假设主应用运行在 http://localhost:3000，远程应用运行在 http://localhost:3001。

在主应用的代码中，我们可以通过以下方式动态加载远程模块：

clike 复制代码

import React, { useState, useEffect } from "react";

const Button = React.lazy(() => import("remote/Button"));

function App() {
  return (
    <React.Suspense fallback="Loading...">
      <Button />
    </React.Suspense>
  );
}

export default App;

我们使用 React 的 lazy 方法和 Suspense 组件来动态加载远程模块，并在加载过程中显示一个加载指示器（Loading...）。

高级配置

为了更好地掌握 ModuleFederationPlugin，我们需要进一步了解一些高级配置选项。通过这些选项，我们可以更精细地控制模块联邦的行为。

1. Shared 配置详解

shared 不仅可以定义要共享的模块，还可以配置共享模块的版本匹配策略和单例模式等。以下是一个更详细的 shared 配置示例：

clike 复制代码

new ModuleFederationPlugin({
  name: "host",
  remotes: {
    remote: "remote@http://localhost:3001/remoteEntry.js"
  },
  shared: {
    react: {
      singleton: true, // 确保只加载一个版本的 react
      requiredVersion: "^17.0.0"
    },
    "react-dom": {
      singleton: true,
      requiredVersion: "^17.0.0"
    }
  }
});

在这个配置中，我们确保 react 和 react-dom 在主应用和远程应用之间只加载一个版本，并强制要求版本匹配。

2. 动态远程模块

有时候我们需要动态加载远程模块的 URL，比如根据环境变量或用户输入。这可以通过以下方式实现：

clike 复制代码

new ModuleFederationPlugin({
  name: "host",
  remotes: {
    remote: `remote@${process.env.REMOTE_URL}/remoteEntry.js`
  },
  shared: ["react", "react-dom"]
});

在这种情况下，我们可以通过设置环境变量来动态改变远程模块的 URL。

3. 使用自定义加载器

如果需要对远程模块进行一些特殊处理，比如缓存或授权，可以实现一个自定义加载器。Webpack 提供了 container API，可以用来获取远程模块。

clike 复制代码

const loadRemoteModule = async (url, scope, module) => {
  await __webpack_init_sharing__("default");
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await window[scope].get(module);
  return factory();
};

// 使用自定义加载器加载远程模块
loadRemoteModule('http://localhost:3001', 'remote', './Button')
  .then(ButtonModule => {
    const Button = ButtonModule.default;
    // 使用 Button 组件
  });

这个示例展示了如何通过自定义加载器来加载远程模块，同时初始化共享作用域。

实践案例

为了更好地理解模块联邦的强大之处，我们来看一个实际的微前端架构案例。假设我们有一个大型电商网站，包含以下几个独立的模块：

产品列表模块：展示产品的列表和详情。
购物车模块：管理购物车中的商品。
用户模块：处理用户的登录和账户管理。

每个模块都是一个独立的 React 应用，并且使用模块联邦来共享公共组件和库。

产品列表模块（Product App）

clike 复制代码

// webpack.config.js
new ModuleFederationPlugin({
  name: "product",
  filename: "remoteEntry.js",
  exposes: {
    "./ProductList": "./src/ProductList",
    "./ProductDetail": "./src/ProductDetail"
  },
  shared: ["react", "react-dom"]
});

购物车模块（Cart App）

clike 复制代码

// webpack.config.js
new ModuleFederationPlugin({
  name: "cart",
  filename: "remoteEntry.js",
  exposes: {
    "./Cart": "./src/Cart"
  },
  shared: ["react", "react-dom"]
});

用户模块（User App）

clike 复制代码

// webpack.config.js
new ModuleFederationPlugin({
  name: "user",
  filename: "remoteEntry.js",
  exposes: {
    "./Login": "./src/Login",
    "./Account": "./src/Account"
  },
  shared: ["react", "react-dom"]
});

主应用（Shell App）

clike 复制代码

// webpack.config.js
new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    product: "product@http://localhost:3001/remoteEntry.js",
    cart: "cart@http://localhost:3002/remoteEntry.js",
    user: "user@http://localhost:3003/remoteEntry.js"
  },
  shared: ["react", "react-dom"]
});

在主应用中，我们可以像使用本地模块一样使用这些远程模块：

clike 复制代码

import React from "react";
const ProductList = React.lazy(() => import("product/ProductList"));
const Cart = React.lazy(() => import("cart/Cart"));
const Login = React.lazy(() => import("user/Login"));

function App() {
  return (
    <div>
      <React.Suspense fallback="Loading...">
        <ProductList />
        <Cart />
        <Login />
      </React.Suspense>
    </div>
  );
}

export default App;

总结

通过本文的详细讲解，我们深入了解了如何利用 ModuleFederationPlugin 实现模块联邦。无论是基本的配置还是高级的应用场景，模块联邦都展示了其在代码共享、独立部署和性能优化方面的巨大潜力。希望这篇教程能为你的前端开发工作提供新的思路和工具，助你构建更加灵活、高效的前端架构。