JavaScript模块联邦如何实现微前端架构设计

JavaScript模块联邦是Webpack5引入的模块共享机制，它允许不同构建产物之间直接共享模块，无需额外打包依赖，这一特性天然契合微前端架构中应用独立开发、运行时集成的核心需求，为微前端方案提供了新的实现思路。

模块联邦核心概念

模块联邦的核心是通过ModuleFederationPlugin插件配置模块的提供方和消费方，主要包含以下几个核心配置项：

• name：当前应用的唯一标识，用于其他应用引用该应用的模块
• filename：远程模块的入口文件名称，其他应用通过该文件获取模块信息
• exposes：配置当前应用对外暴露的模块，供其他应用消费
• remotes：配置当前应用需要消费的远程应用地址和标识
• shared：配置需要共享的依赖，避免重复加载相同版本的依赖

基于模块联邦的微前端架构设计思路

基于模块联邦设计微前端架构时，通常将整体应用拆分为主应用和多个子应用，各应用独立开发、独立部署，运行时由主应用动态加载子应用模块，整体架构设计遵循以下原则：

1. 应用拆分原则

按照业务域拆分独立子应用，每个子应用对应一个完整的业务模块，拥有独立的路由、状态和构建配置，子应用之间避免直接耦合，仅通过约定的接口进行通信。

2. 模块共享策略

将通用的UI组件、工具函数、第三方依赖通过shared配置共享，优先使用更高版本的依赖，避免不同子应用加载多份相同依赖导致包体积膨胀。

3. 通信机制设计

主应用和子应用之间可以通过自定义事件、全局状态管理或者约定的props传递进行通信，避免子应用直接依赖主应用的内部实现。

实践示例

子应用配置（提供模块）

子应用作为模块提供方，需要在Webpack配置中暴露对应的业务组件：

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3001, // 子应用运行端口
    historyApiFallback: true
  },
  output: {
    publicPath: 'http://localhost:3001/',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'subApp', // 子应用唯一标识
      filename: 'remoteEntry.js', // 远程入口文件
      exposes: {
        // 暴露子应用的App组件
        './App': './src/App.js'
      },
      shared: {
        // 共享react和react-dom依赖
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

子应用的App.js组件内容如下：

// 子应用 src/App.js
import React from 'react';

const App = () => {
  return (
    <div style={{ padding: '20px', border: '1px solid #ccc' }}>
      <h3>这是子应用暴露的组件</h3>
      <p>子应用独立运行在3001端口</p>
    </div>
  );
};

export default App;

主应用配置（消费模块）

主应用作为模块消费方，需要配置远程子应用的地址，动态加载子应用暴露的模块：

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    port: 3000, // 主应用运行端口
    historyApiFallback: true
  },
  output: {
    publicPath: 'http://localhost:3000/',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'mainApp', // 主应用唯一标识
      remotes: {
        // 配置远程子应用，subApp对应子应用的name，地址为子应用入口文件地址
        subApp: 'subApp@http://localhost:3001/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

主应用加载子应用模块的代码如下：

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

// 动态导入子应用暴露的App组件
const SubApp = React.lazy(() => import('subApp/App'));

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <h2>主应用</h2>
      <p>下方是加载的子应用模块：</p>
      <Suspense fallback={<div>加载子应用中...</div>}>
        <SubApp />
      </Suspense>
    </div>
  );
};

export default App;

注意事项

• 所有应用的publicPath需要配置为绝对地址，避免资源加载路径错误
• 共享依赖的版本需要做好兼容，避免版本冲突导致运行报错
• 子应用的路由需要做好前缀配置，避免和主应用路由冲突
• 生产环境需要做好远程模块的容错处理，避免子应用加载失败导致主应用白屏

JavaScript模块联邦微前端前端架构修改时间：2026-07-23 18:24:36