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

🕗 发布于 2024-12-12 11:56 前端 webpack 架构

前言

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

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

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

优点

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

基本概念

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

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

使用步骤

1. 设置主应用（Host Application）

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

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 中进行类似的配置。

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。

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

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 配置示例：

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，比如根据环境变量或用户输入。这可以通过以下方式实现：

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

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

3. 使用自定义加载器

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

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）

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

购物车模块（Cart App）

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

用户模块（User App）

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

主应用（Shell App）

// 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"]
});

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

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 实现模块联邦。无论是基本的配置还是高级的应用场景，模块联邦都展示了其在代码共享、独立部署和性能优化方面的巨大潜力。希望这篇教程能为你的前端开发工作提供新的思路和工具，助你构建更加灵活、高效的前端架构。

原文地址：https://blog.csdn.net/m0_37890289/article/details/144411901

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：使用wol-web通过NAS远程唤醒电脑
下一篇：深入理解JavaScript中的自定义属性操作|style 样式属性操作|className 类名属性操作

CNCF云原生生态版图-分类指南（一）- 观测和分析
属于可观测性分类的项目和产品共有 148 个，其中 CNCF 项目有 19 个。Monitoring 监测Time series 时间序列Alerting 警告Metrics 指标Logging 日志
阅读更多2024-12-12
如何绕过IP禁令
IP 封禁是网络服务（如网站或在线游戏）阻止来自特定公共IP地址的请求的一种方式。当服务封禁某个IP地址时，它会将其网络配置为拒绝来自该地址的任何请求。这意味着如果你尝试从被封禁的IP地址访问服务，你
阅读更多2024-12-12
MySQL常用的数据类型
整数类型（INT、TINYINT、SMALLINT、MEDIUMINT、BIGINT）：用于存储整数值。日期和时间类型（DATE、TIME、DATETIME、TIMESTAMP）：用于存储日期和时间数
阅读更多2024-12-12
电销机器人为什么越来越受欢迎？
因此，电销机器人能够识别销售机会，并以高效的方式满足消费者需求。这些机器人还可以利用实时语音转换技术，将所有电话通讯录进行文本化操作，方便于持续的追踪和分析，极大地提高了营销管理的效率。只需要一个良好
阅读更多2024-12-12
Idea汉化插件Datagrip汉化插件
Idea汉化插件Datagrip汉化插件
阅读更多2024-12-12
备战蓝桥第一天验证回文串杨辉三角
【代码】备战蓝桥第一天
阅读更多2024-12-12
STM32 ADC 配置
ADC（模数转换器）用于将模拟信号转换为数字信号，以便单片机处理。模数转换器（Analog-to-Digital Converter, ADC）是电子系统中不可或缺的一部分，它负责将现实世界中的连续物
阅读更多2024-12-12
FFmpeg 解复用过程
使用 FFmpeg 说明多媒体解复用过程。
阅读更多2024-12-12
Next.js系统性教学：深入理解部分预渲染与边缘计算
部分预渲染（Partial Prerendering）是 Next.js 提供的一种渲染策略，它允许开发者在构建时对页面的部分内容进行预渲染，而其他部分则延迟渲染。这意味着应用的某些部分可以提前生成静
阅读更多2024-12-12
Midjourney Imagine API 申请及使用
Midjourney 是一款非常强大的 AI 绘图工具，只要输入关键字，就能在短短一两分钟生成十分精美的图像。Midjourney 以其出色的绘图能力在业界独树一帜，如今，Midjourney 早已在
阅读更多2024-12-12