从零构建微前端生态平台：基于 Module Federation 的最佳实践

前言

在现代前端开发中，随着应用规模的不断扩大和团队的增长，传统的单体应用架构逐渐暴露出维护困难、部署风险高、技术栈固化等问题。微前端架构作为一种新兴的解决方案，为我们提供了将大型前端应用拆分为多个独立、可维护的小型应用的能力。

本文将基于一个完整的微前端生态平台项目，深入探讨如何使用 Module Federation 技术栈构建现代化的微前端应用，涵盖从架构设计到部署上线的完整流程。

项目概览

🎯 技术栈

构建工具 : Rsbuild + Module Federation
前端框架: React 18 + TypeScript
样式方案: CSS Modules
状态管理: React Hooks + localStorage
路由管理: React Router v6
包管理: pnpm workspace
部署平台: GitHub Pages

🏗️ 架构设计

bash 复制代码

微前端生态平台
├── shell/              # 主应用 (端口 3000)
│   ├── 统一导航
│   ├── 路由管理
│   └── 子应用集成
├── counter/            # 计数器应用 (端口 3001)
├── todos/              # 待办事项应用 (端口 3002)
└── ui-kit/             # 共享组件库
    ├── Button
    ├── Input
    └── Card

核心特性

🚀 Module Federation 2.0

与 Webpack 5 内置的 Module Federation 相比，Module Federation 2.0 除了支持原有的模块导出、模块加载和依赖共享等核心功能，，还新增了：

动态类型提示
Manifest
Federation Runtime
Runtime Plugin System
Chrome Devtool

等特性。这些增强功能使得 Module Federation 2.0 更加适合作为构建和管理大型 Web 应用的微前端架构标准。

typescript 复制代码

// shell/module-federation.config.ts
export default createModuleFederationConfig({
  name: 'shell',
  remotes: {
    counter: 'counter@http://localhost:3001/remoteEntry.js',
    todos: 'todos@http://localhost:3002/remoteEntry.js',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
    'react-router-dom': { singleton: true },
  },
});

关键优势：

运行时集成: 子应用在浏览器中动态加载
依赖共享: React 等公共库只加载一次
独立部署: 每个应用可以独立开发和部署

🎨 统一设计系统

通过共享的 UI Kit 组件库，确保整个生态平台的视觉一致性：

typescript 复制代码

// ui-kit/src/Button/Button.tsx
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  children,
  ...props
}) => {
  return (
    <button 
      className={`${styles.button} ${styles[variant]} ${styles[size]}`}
      {...props}
    >
      {children}
    </button>
  );
};

设计原则：

扁平化风格: 现代化的视觉体验
4px 圆角: 统一的圆角规范
橙色主题: #f77f00 作为主题色
三种尺寸: sm/md/lg 满足不同场景

📱 响应式架构

主应用采用响应式布局，适配各种设备：

css 复制代码

/* shell/src/Layout.module.css */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .navigation {
    padding: 0.75rem 1rem;
  }
  
  .brand {
    font-size: 1.1rem;
  }
}

核心实现

1. 主应用架构

主应用作为微前端的容器，负责：

typescript 复制代码

// shell/src/App.tsx
const App: React.FC = () => {
  const basename = process.env.NODE_ENV === 'production' ? '/micro-frontend' : '';
  
  return (
    <Router basename={basename}>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="counter" element={<CounterPage />} />
          <Route path="todos" element={<TodosPage />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </Router>
  );
};

核心职责：

路由管理: 统一的路由配置和导航
布局框架: 提供一致的页面结构
错误边界: 处理子应用加载失败的情况

2. 子应用集成

子应用通过动态导入的方式集成：

typescript 复制代码

// shell/src/pages/CounterPage.tsx
const Counter = React.lazy(() => import('counter/Counter'));

export const CounterPage: React.FC = () => {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>加载计数器应用中...</div>}>
        <Counter />
      </Suspense>
    </ErrorBoundary>
  );
};

3. 状态管理策略

采用分层的状态管理策略：

typescript 复制代码

// 全局状态：主应用负责
// 局部状态：各子应用独立管理
export const useCounter = (initialValue: number = 0) => {
  const [count, setCount] = useState(() => {
    const saved = localStorage.getItem('counter-value');
    return saved ? parseInt(saved, 10) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem('counter-value', count.toString());
  }, [count]);

  return {
    count,
    increment: () => setCount(prev => prev + 1),
    decrement: () => setCount(prev => prev - 1),
    reset: () => setCount(initialValue),
  };
};

开发体验优化

🔥 热更新支持

json 复制代码

{
  "scripts": {
    "dev": "concurrently \"pnpm dev:ui-kit\" \"pnpm dev:shell\" \"pnpm dev:counter\" \"pnpm dev:todos\"",
    "dev:shell": "cd shell && pnpm dev",
    "dev:counter": "cd counter && pnpm dev",
    "dev:todos": "cd todos && pnpm dev"
  }
}

📦 pnpm Workspace

yaml 复制代码

# pnpm-workspace.yaml
packages:
  - 'shell'
  - 'counter'
  - 'todos'
  - 'ui-kit'

优势：

依赖共享: 减少重复安装
统一管理: 一键安装所有依赖
版本一致: 确保依赖版本统一

部署策略

🚀 GitHub Pages 部署

采用单仓库多应用的部署策略：

yaml 复制代码

# .github/workflows/deploy.yml
name: Deploy 微前端生态平台 to GitHub Pages

jobs:
  build:
    steps:
    - name: Build Counter App
      run: cd counter && pnpm build
      
    - name: Build Todos App  
      run: cd todos && pnpm build
      
    - name: Build Shell App
      run: cd shell && pnpm build
      
    - name: Setup GitHub Pages
      run: |
        mkdir -p deploy
        cp -r shell/dist/* deploy/
        mkdir -p deploy/mf-counter
        cp counter/dist/remoteEntry.js deploy/mf-counter/
        mkdir -p deploy/mf-todos  
        cp todos/dist/remoteEntry.js deploy/mf-todos/

部署架构：

bash 复制代码

https://luozyiii.github.io/micro-frontend/
├── /                    # Shell 主应用
├── /mf-counter/         # Counter 微前端资源
└── /mf-todos/           # Todos 微前端资源

🔧 路径配置

为了支持 GitHub Pages 的子路径部署：

typescript 复制代码

// 生产环境配置
const isProduction = process.env.NODE_ENV === 'production';

export default defineConfig({
  output: {
    ...(isProduction && {
      assetPrefix: '/micro-frontend/',
    }),
  },
});

性能优化

📊 代码分割

应用级分割: 每个微应用独立打包
路由级分割: 使用 React.lazy 懒加载
组件级分割: 大型组件按需加载

🚀 缓存策略

依赖共享: React 等公共库只加载一次
静态资源: 利用浏览器缓存
Module Federation: 运行时缓存机制

📱 用户体验

typescript 复制代码

// 加载状态处理
<Suspense fallback={
  <div className={styles.loading}>
    <div className={styles.spinner} />
    <p>加载应用中...</p>
  </div>
}>
  <RemoteApp />
</Suspense>