微前端架构

以下是关于 微前端架构（Micro Frontends） 的系统知识梳理，涵盖核心概念、技术方案、实践策略及学习路径，帮助我们全面掌握这一现代前端架构范式：

---

一、微前端核心概念

1. 定义与目标

• 定义：将单体前端应用拆分为多个独立开发、部署、运行的子应用，通过统一容器整合的技术架构。
• 核心价值：
  • 技术异构：支持不同技术栈（React/Vue/Angular）共存
  • 独立交付：子应用独立开发、测试、部署
  • 增量升级：逐步替换旧系统，降低风险
  • 团队自治：跨团队协作，减少代码耦合

2. 架构对比

维度	单体应用	微前端架构
技术栈	统一技术栈	多技术栈共存
部署频率	整体部署	独立部署
团队协作	强耦合	弱耦合
复杂度	集中式管理	分布式管理

---

二、核心实现方案

1. 路由分发式

• 原理：通过 URL 路由将请求分发到不同子应用
• 实现：Nginx 反向代理、服务端模板组合
• 适用场景：简单页面拼接，技术栈差异大

2. 组件嵌套式

• 原理：主应用通过 Web Components/iframe 加载子应用
• 实现：

  <!-- 主应用 -->
  <micro-app src="https://sub-app.com"></micro-app>
  

• 优点：隔离性强，技术无关
• 缺点：通信复杂，性能损耗

3. 模块联邦式（Module Federation）

• 原理：Webpack 5 动态加载远程模块
• 配置示例：

  // host-app webpack.config.js
  new ModuleFederationPlugin({name: 'host',remotes: {subApp: 'sub@http://localhost:3001/remoteEntry.js'}
  });
  

• 优势：代码共享、实时更新
• 工具：Webpack 5、Vite 插件

4. 构建时集成

• 原理：通过 NPM 包形式集成子应用
• 实现：npm install + 主应用路由配置