JavaScript微前端如何实现模块联邦与应用拆分

微前端架构的核心目标是将大型前端应用拆分为多个独立可维护的子应用，同时保证子应用之间能够高效共享公共模块。webpack5推出的模块联邦（Module Federation）特性，天然适配微前端的应用拆分需求，无需额外引入复杂的微前端框架即可实现跨应用模块共享。

模块联邦核心概念

模块联邦允许不同的webpack构建产物之间互相引用模块，无需将依赖打包到自身产物中，核心配置分为两个角色：

• 宿主应用（Host）：负责加载其他应用的远程模块，通常是微前端的主应用
• 远程应用（Remote）：暴露自身模块给其他应用使用，通常是微前端的子应用

核心配置参数说明

基于模块联邦实现应用拆分

我们以一个简单的电商微前端项目为例，主应用负责整体布局，子应用负责商品列表和用户信息模块，通过模块联邦实现拆分。

1. 远程应用（商品子应用）配置

首先初始化商品子应用的webpack配置，暴露商品列表组件：

// 商品子应用 webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "development",
  devServer: {
    port: 3001, // 子应用运行端口
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "productApp", // 子应用唯一标识
      filename: "remoteEntry.js", // 远程入口文件
      exposes: {
        // 暴露商品列表组件，别名为./ProductList
        "./ProductList": "./src/ProductList.js",
      },
      shared: {
        // 共享react和react-dom，避免重复打包
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

商品列表组件的实现代码如下：

// 商品子应用 src/ProductList.js
import React from "react";

const ProductList = () => {
  const productList = [
    { id: 1, name: "手机", price: 3999 },
    { id: 2, name: "电脑", price: 6999 },
  ];
  return (
    <div>
      <h3>商品列表</h3>
      <ul>
        {productList.map(item => (
          <li key={item.id}>
            {item.name} - 价格：{item.price}元
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

2. 宿主应用（主应用）配置

主应用需要引用商品子应用暴露的模块，配置如下：

// 主应用 webpack.config.js
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "development",
  devServer: {
    port: 3000, // 主应用运行端口
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "mainApp", // 主应用唯一标识
      remotes: {
        // 声明远程应用，productApp是别名，对应子应用的name，地址是子应用的远程入口
        productApp: "productApp@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

主应用中加载远程商品列表组件的代码：

// 主应用 src/App.js
import React, { Suspense } from "react";

// 动态加载远程模块
const ProductList = React.lazy(() => import("productApp/ProductList"));

const App = () => {
  return (
    <div>
      <h1>电商微前端主应用</h1>
      <Suspense fallback={<div>加载商品模块中...</div>}>
        <ProductList />
      </Suspense>
    </div>
  );
};

export default App;

实践注意事项

• shared配置中设置singleton: true可以保证公共依赖只加载一次，避免版本冲突和重复打包
• 远程应用的端口和地址需要与主应用配置一致，生产环境需要替换为实际的部署地址
• 如果子应用需要独立运行，可以在入口文件中做环境判断，独立运行时直接渲染根组件，被引用时不执行独立渲染逻辑
• 模块联邦支持嵌套引用，即子应用也可以引用其他子应用的模块，实现更复杂的微前端架构

模块联邦不是微前端的唯一实现方案，但是对于webpack生态的项目来说，它是最轻量、侵入性最低的拆分方案，不需要引入qiankun等额外框架即可实现需求。

JavaScript微前端模块联邦应用拆分webpack修改时间：2026-06-25 23:54:34