外观
微前端
微前端是一种将前端应用分解为多个独立、可独立开发、部署和运行的较小应用的架构风格。它借鉴了微服务的架构理念，将其应用于前端领域，旨在解决大型前端项目的可维护性、可扩展性和团队协作问题。
什么是微前端？
微前端是一种架构模式，允许多个团队独立开发前端应用的不同部分，最后在运行时组合成统一的用户界面。
传统单体应用:
[一个巨大的前端应用]
├── 团队A负责的功能
├── 团队B负责的功能
├── 团队C负责的功能
└── 统一构建部署
微前端架构:
[基座应用]
├── 微应用A (团队A独立开发)
├── 微应用B (团队B独立开发)
├── 微应用C (团队C独立开发)
└── 运行时集成核心概念
应用拆分
将大型应用按业务域或功能模块拆分为独立的微应用。
电商平台拆分示例:
[电商平台]
|
+-------+-------+
| | |
[用户中心] [商品系统] [订单系统]
| | |
独立团队 独立技术栈 独立部署技术栈无关
各微应用可以使用不同的前端框架和技术栈。
技术栈多样性:
微应用A: [React + TypeScript]
微应用B: [Vue 3 + Composition API]
微应用C: [Angular + RxJS]
微应用D: [原生JavaScript]
|
[在基座中统一集成]独立开发部署
每个微应用拥有独立的开发、构建和部署流程。
独立生命周期:
[微应用开发] -> [独立构建] -> [独立测试] -> [独立部署]
| | | |
团队自治 技术选型自由 质量保证 发布灵活主要架构模式
基座模式
通过一个主应用 (基座) 来管理和集成各个微应用。
基座架构:
[基座应用] (路由管理、状态共享、公共依赖)
|
+-- 加载 --> [微应用A] (路由: /appA/*)
|
+-- 加载 --> [微应用B] (路由: /appB/*)
|
+-- 加载 --> [微应用C] (路由: /appC/*)路由分发模式
根据 URL 路由将请求分发到不同的微应用。
路由分发流程:
[用户访问] -> [路由解析] -> [匹配微应用] -> [加载对应资源] -> [渲染页面]
| | | | |
/appA 识别appA 应用A入口 动态加载 显示应用A组件组合模式
将微应用作为组件在页面中组合使用。
组件组合:
[页面布局]
|
+-- [头部微应用]
|
+-- [导航微应用]
|
+-- [主内容区微应用]
|
+-- [底部微应用]关键技术实现
模块联邦
Webpack 5 模块联邦实现的微前端方案。
模块联邦原理:
[应用A] -- 暴露模块 --> [模块联邦] <-- 消费模块 -- [应用B]
| | |
作为提供者 中心协调机制 作为消费者单 SPA 框架
基于单 SPA 的微前端解决方案。
单SPA工作流程:
[注册微应用] -> [路由匹配] -> [加载生命周期] -> [挂载应用] -> [卸载清理]
| | | | |
应用注册表 路由事件 bootstrap mount unmountWeb Components
使用原生 Web Components 技术实现微前端。
Web Components方式:
[微应用A] -> [封装为Custom Element] -> [在基座中使用]
| | |
独立开发 shadow DOM隔离 原生组件使用通信机制
全局状态管理
通过全局状态实现微应用间的数据共享。
状态共享:
[微应用A] -- 发布事件 --> [全局事件总线] <-- 订阅事件 -- [微应用B]
| | |
状态变更 状态中转站 响应更新自定义事件
使用浏览器自定义事件进行通信。
事件通信流程:
// 应用A发送事件
window.dispatchEvent(new CustomEvent('app-event', {
detail: { data: 'message' }
}));
// 应用B监听事件
window.addEventListener('app-event', handler);URL 参数传递
通过 URL 参数实现应用间数据传递。
URL参数传递:
[应用A] -- 跳转带参 --> [应用B]
| |
/appA?data=xxx 读取URL参数样式隔离方案
作用域 CSS
通过 CSS 模块化或命名空间实现样式隔离。
样式隔离方式:
// 应用A样式
.app-a-container { ... }
// 应用B样式
.app-b-container { ... }
// 基座中同时存在但互不影响Shadow DOM
使用 Shadow DOM 实现完全的样式隔离。
Shadow DOM隔离:
[微应用] -> [封装到Shadow Root] -> [样式作用域隔离]
| | |
组件内容 独立DOM树 样式不泄漏动态样式加载
运行时动态加载和卸载样式表。
动态样式管理:
[加载微应用] -> [添加样式表] -> [渲染组件] -> [卸载应用] -> [移除样式表]
| | | | |
应用激活 注入样式 显示界面 应用切换 清理样式实际应用场景
大型企业应用
适用于需要多个团队协作的大型企业级应用。
企业管理系统:
[统一门户]
|
+-- [HR系统] (React团队)
|
+-- [CRM系统] (Vue团队)
|
+-- [OA系统] (Angular团队)
|
+-- [BI系统] (原生技术团队)遗留系统迁移
逐步迁移老旧的单体前端系统。
迁移策略:
[遗留单体系统] -> [逐步拆分为微应用] -> [完全迁移]
| | |
现有系统 共存过渡阶段 全新架构多产品线整合
整合公司内部多个独立产品线。
产品线整合:
[统一用户界面]
|
+-- [产品A] (独立域名app-a.com)
|
+-- [产品B] (独立域名app-b.com)
|
+-- [产品C] (独立域名app-c.com)优势与挑战
核心优势
微前端价值:
[团队自治] -> [技术多样性] -> [独立部署] -> [渐进升级]
| | | |
独立开发节奏 框架选择自由 快速发布能力 平滑迁移路径面临挑战
实施挑战:
[复杂度增加] -> [一致性保证] -> [性能开销] -> [调试困难]
| | | |
架构复杂性 设计系统统一 运行时损耗 跨应用调试工具生态系统
主流框架
微前端框架对比:
- single-spa: 基础框架，高度灵活
- qiankun: 基于single-spa，开箱即用
- Module Federation: Webpack原生支持
- Luigi: 企业级微前端框架
- Piral: 模块化微前端解决方案配套工具
开发工具链:
[构建工具] -> [部署平台] -> [监控系统] -> [调试工具]
| | | |
微应用打包 独立部署 性能监控 跨应用调试