《每天30分钟吃透一Module Federation跨应用组件共享，手撕qiankun/EMP方案选型秘籍》

原创

已于 2025-04-11 10:01:10 修改 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-03-27 17:28:25 首次发布

Module Federation 跨应用组件共享实战：从原理到代码的降维打击

技术选型背景
2023年微前端方案性能基准测试显示：

Qiankun 在 200+ 路由的大型应用中首屏加载时间 ≥ 3.2s
EMP 的共享依赖冲突率在复杂场景达 17%
Module Federation 的热更新速度比传统方案快 400%

本文将用真实代码演示如何用 Webpack 5 的 Module Federation 实现跨应用组件共享，并对比三大方案核心技术差异。

一、Module Federation 核心原理图解

1.1 运行时容器架构

# 项目结构
├── host-app # 宿主应用
│   ├── src/bootstrap.js # 动态加载远程模块
│   └── webpack.config.js
└── remote-app # 远程组件库
    ├── src/Button.js # 暴露的组件
    └── webpack.config.js

1.2 关键配置解析（webpack.config.js）

// remote-app 配置
new ModuleFederationPlugin({
   
   
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
   
   
    './Button': './src/Button.js', // 暴露组件路径
  },
  shared: ['react', 'react-dom'] // 共享依赖
})

// host-app 配置 
new ModuleFederationPlugin({
   
   
  remotes: {
   
   
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  },
  shared: {
   
   
    react: {
   
    singleton: true }, // 单例模式共享
    'react-dom': {
   
    singleton: true }
  }
})

二、实战：跨项目共享 React 组件

2.1 远程组件开发（remote-app/src/Button.js）

import React from 'react';

// 服务端获取样式配置
const fetchStyle = async () => {
  const res = await fetch('/api/button-style');
  return res.json();
};

export const DynamicButton = () => {
  const [style, setStyle] = React.useState({});
  
  React.useEffect(() => {
    fetchStyle().then(setStyle);
  }, []);

  return <button style={style}>跨应用共享按钮</button>;
};

2.2 宿主应用动态加载（host-app/src/App.jsx）

import React, { Suspense } from 'react';

const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>加载远程按钮...</div>}>
        <RemoteButton />
      </Suspense>
    </div>
  );
}

2.3 实时样式热更新演示

// 在远程应用启动 WebSocket 监听
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (event) => {
   
   
  if (event.data === 'style-update') {
   
   
    const link = document.querySelector('#dynamic-style'