微前端架构实战与 Module Federation

---

🧠 为什么要微前端？

✅ 传统 SPA 的问题：

问题	描述
构建时间越来越长	单体应用构建缓慢，难以增量部署
多团队协作困难	不同业务线互相依赖紧耦合
技术栈难以迁移	老项目技术债，无法局部替换

---

✅ 微前端目标：

• 像微服务一样拆前端系统
• 各子应用独立开发、独立部署、独立运行
• 支持多技术栈共存（React + Vue + 原生）

---

🧩 核心架构方案一览

架构方式	技术实现	适用场景
iframe 方式	每个子应用独立运行在 iframe 中	安全性高，交互弱
JS 沙箱 + 路由劫持	single-spa、qiankun	兼容性强，适配广
模块联邦 Module Federation	Webpack5 原生微前端方案	构建时解耦，性能优

---

🌟 一、Webpack 5 Module Federation 实战精讲

Module Federation 是 Webpack 5 引入的新能力，它允许多个项目共享模块并动态加载远程模块，核心在于构建时解耦 + 运行时共享。

---

✅ 模块联邦核心概念

名词	含义
exposes	当前应用暴露的模块
remotes	当前应用依赖的远程模块
shared	多个应用之间共享的依赖（如 React）

---

🛠 示例一：主应用（host）

// webpack.config.js
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
})

---

🛠 示例二：子应用（remote）

// webpack.config.js
new ModuleFederationPlugin({
  name: 'remoteApp',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button',
  },
  shared: ['react', 'react-dom'],
})

---

🧪 使用远程组件

// App.tsx（主应用中）
const RemoteButton = React.lazy(() => import('remoteApp/Button'))

<React.Suspense fallback={<div>Loading...</div>}>
  <RemoteButton />
</React.Suspense>

---

✅ 使用场景：

• 多业务子系统协作（如后台管理系统：用户、订单、运营平台分别开发）；
• 独立部署上线（一个子系统出 bug，不影响其他系统）；
• 渐进式迁移老项目（局部模块迁移 React/Vue）；

---

🔧 常用微前端解决方案对比

名称	技术核心	特点
qiankun	基于 single-spa + JS 沙箱	成熟稳定，兼容性强，易用
Module Federation	Webpack 5 原生支持	性能更好，无需运行时沙箱
single-spa	原始微前端路由调度器	灵活性高，但接入成本较高
WebComponent	浏览器标准封装组件	跨框架，但功能受限，支持度低

---

🧠 微前端中的路由、状态、样式处理方案

✅ 路由隔离

• 主应用管理全局路由（推荐 Hash 路由）
• 子应用内部自持路由，使用 basename 保持 URL 隔离

---

✅ 状态管理隔离与共享

方案	应用
各自状态管理	每个子系统独立 Pinia/Redux
全局状态共享	使用 localStorage、postMessage、EventBus
跨子应用通信	推荐使用 redux-subspace 或自研桥接器

---

✅ 样式隔离（避免污染）

• CSS Modules / Scoped CSS 保持局部作用域
• Shadow DOM（Web Components）天然隔离
• 动态 prefix 注入类名（qiankun 自带 CSS 沙箱机制）

---

✅ 微前端项目开发流程建议

阶段	建议实践
项目拆分	按业务边界划分子应用
构建配置	使用 Webpack 5 / Vite + MF
共享模块	React、AntD、Tailwind 等设为 shared
本地开发	主应用与子应用支持本地联调
独立部署	每个子应用可独立上线，远程加载

---

💬 面试高频问题拆解

📌 Q1：微前端适用于哪些项目场景？不适合哪些？

答：

✅ 适合：

• 多业务线并行开发；
• 多团队协作，不同发布节奏；
• 多技术栈共存（React/Vue 混合）；
• 旧系统逐步重构、迁移；

❌ 不适合：

• 小型应用或单人项目；
• 没有明确子系统边界的产品；

---

📌 Q2：Module Federation 与 qiankun 有什么区别？

对比点	Module Federation	qiankun
实现原理	Webpack 原生模块共享	路由劫持 + 沙箱运行环境
共享依赖方式	编译期共享模块	运行时隔离
性能	更优（直接加载远程模块）	稍逊一筹（需要加载沙箱）
接入难度	中（需熟悉打包）	简单（开箱即用）
技术栈限制	Webpack 强绑定	技术栈无关，兼容 Vue/React 等

---

📌 Q3：主子应用如何通信？

常见方式：

• 自定义 EventBus（如 window.dispatchEvent）
• 全局状态共享（如 Redux store）；
• postMessage 跨子窗口消息；
• 利用 URL 参数通信；

---

✅ 总结

微前端是现代中大型前端架构的趋势，它让前端项目更易于扩展、维护、独立部署。掌握 Module Federation 或 qiankun，不仅提升你的架构能力，也代表你具备团队协作 + 复杂项目经验，在面试中极具竞争力。