每天一个前端小知识 Day 17 - 微前端架构实战与 Module Federation

微前端架构实战与 Module Federation

🧠 为什么要微前端？

✅ 传统 SPA 的问题：

✅ 微前端目标：

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

🧩 核心架构方案一览

🌟 一、Webpack 5 Module Federation 实战精讲

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

✅ 模块联邦核心概念

🛠 示例一：主应用（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）；

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

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

✅ 路由隔离

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

✅ 状态管理隔离与共享

✅ 样式隔离（避免污染）

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

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

💬 面试高频问题拆解

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

答：

✅ 适合：

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

❌ 不适合：

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

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

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

常见方式：

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

✅ 总结

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