微前端（Micro Frontends）的核心重点知识梳理，覆盖基础概念、主流框架（single-spa、qiankun 等）、核心问题解决方案及最佳实践：
一、微前端基础认知
1. 核心定义
微前端是将大型单体前端应用拆分为多个独立、可自治的小应用的架构模式，每个小应用：
- 可独立开发、独立部署、独立运行；
- 技术栈无关（React、Vue、Angular 等可共存）；
- 通过基座应用统一调度和集成。
2. 核心价值
| 价值点 |
说明 |
| 技术栈解耦 |
新旧技术栈共存，支持渐进式迁移 |
| 独立部署 |
单个子应用更新不影响其他应用，降低风险 |
| 团队自治 |
不同团队负责不同子应用，提升开发效率 |
| 可扩展性强 |
按需新增/移除子应用，灵活应对业务变化 |
3. 适用场景
- 大型企业级应用（多团队协作）；
- 遗留系统迁移（老技术栈逐步替换）；
- 多技术栈共存（如部分用 React、部分用 Vue）；
- 模块化产品（需动态组合不同功能模块）。
二、微前端核心架构与设计原则
1. 核心架构组成
| 角色 |
职责 |
| 基座应用 |
统一调度子应用（路由管理、应用加载、通信协调） |
| 子应用 |
独立业务模块（实现具体功能，导出生命周期） |
| 公共层 |
共享依赖（如组件库、工具函数、状态管理） |
2. 关键设计原则
- 独立部署：子应用可单独构建、部署，无需重启基座；
- 技术栈无关：基座不限制子应用技术栈，通过标准协议集成；
- 样式隔离：子应用样式互不污染；
- JS 沙箱：子应用 JS 运行环境隔离，避免全局变量冲突；
- 单一职责：每个子应用聚焦特定业务域，避免过度耦合。
三、主流微前端框架详解
1. single-spa（微前端“基座”）
single-spa 是最早的微前端框架，核心是提供应用注册、生命周期管理、路由匹配能力，需自行处理样式隔离、通信等问题。
（1）核心概念
- 应用注册：基座通过
registerApplication 注册子应用，指定名称、加载函数、路由匹配规则；
- 生命周期：子应用需导出 4 个核心生命周期（Promise 化）：
bootstrap：应用初始化（仅执行一次）；mount：应用挂载（路由匹配时执行）；unmount：应用卸载（路由切换时执行）；update（可选）：应用更新。
（2）使用步骤
1
2
3
4
5
6
7
8
9
10
11
12
|
import { registerApplication, start } from 'single-spa';
registerApplication(
'vue-app',
() => import('./vue-app/main.js'),
(location) => location.pathname.startsWith('/vue')
);
start();
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import Vue from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
export async function bootstrap() {
console.log('Vue app bootstrap');
}
export async function mount(props) {
instance = new Vue({
router,
render: h => h(App)
}).$mount('#vue-app');
}
export async function unmount() {
instance.$destroy();
instance = null;
}
|
（3）优缺点
| 优点 |
缺点 |
| 灵活度高（可定制性强） |
需自行处理样式隔离、JS 沙箱、通信等问题 |
| 生态成熟（社区方案多） |
配置繁琐，上手成本较高 |
2. qiankun（基于 single-spa 的企业级方案）
qiankun 是阿里开源的微前端框架，基于 single-spa 封装，开箱即用解决了样式隔离、JS 沙箱、资源加载等痛点，是国内最主流的方案。
（1）核心特性
- 样式隔离：支持
shadow DOM、scoped css、动态样式表隔离；
- JS 沙箱：提供 3 种沙箱方案（快照沙箱、代理沙箱、Legacy 沙箱），避免全局变量污染；
- 预加载：预加载子应用资源，提升加载速度；
- HTML Entry：支持直接加载子应用的 HTML 文件（无需改造子应用构建配置）。
（2）使用步骤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import { registerMicroApps, start, initGlobalState } from 'qiankun';
registerMicroApps([
{
name: 'vue-app',
entry: '//localhost:8081',
container: '#sub-app-container',
activeRule: '/vue',
props: { msg: '来自基座的消息' }
}
]);
const { onGlobalStateChange, setGlobalState } = initGlobalState({
user: null
});
onGlobalStateChange((state, prev) => {
console.log('状态变化：', state, prev);
});
start({
sandbox: { strictStyleIsolation: true }
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import Vue from 'vue';
import App from './App.vue';
import router from './router';
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
router,
render: h => h(App)
}).$mount(container ? container.querySelector('#app') : '#app');
}
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('Vue app bootstrap');
}
export async function mount(props) {
console.log('来自基座的消息：', props.msg);
props.onGlobalStateChange && props.onGlobalStateChange((state, prev) => {
console.log('子应用监听状态：', state, prev);
});
render(props);
}
export async function unmount() {
instance.$destroy();
instance = null;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const { name } = require('./package.json');
module.exports = {
devServer: {
port: 8081,
headers: {
'Access-Control-Allow-Origin': '*'
}
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`
}
}
};
|
（3）优缺点
| 优点 |
缺点 |
| 开箱即用（样式隔离、JS 沙箱等已封装） |
对老项目改造有一定成本（需调整构建配置） |
| 文档完善（中文文档友好） |
复杂场景下定制性略低于 single-spa |
| 生态成熟（国内大厂广泛使用） |
|
3. 其他主流方案对比
| 方案 |
核心特点 |
适用场景 |
| MicroApp |
京东开源，基于 Web Components，轻量易用 |
中小型项目，需快速集成 |
| EMP |
基于 Webpack Module Federation，侧重模块共享 |
需深度共享组件/依赖的场景 |
| Wujie |
腾讯开源，基于 Web Components + iframe，兼容性好 |
需兼容老技术栈（如 jQuery）的场景 |
| iframe |
原生方案，隔离性最强 |
简单场景、需极致隔离的场景（性能较差） |
四、微前端核心问题解决方案
1. 样式隔离
| 方案 |
实现方式 |
优缺点 |
| qiankun 动态样式表 |
自动隔离子应用样式表，卸载时移除 |
简单易用，推荐 |
| CSS Modules |
子应用样式类名哈希化 |
隔离性好，但需改造子应用样式 |
| Shadow DOM |
将子应用挂载到 Shadow DOM 中 |
隔离性最强，但兼容性略差（部分第三方库可能异常） |
| BEM 命名规范 |
子应用样式类名加前缀（如 .vue-app-btn） |
简单，但依赖团队规范，易出错 |
2. JS 沙箱
| 方案 |
实现方式 |
优缺点 |
| qiankun 代理沙箱 |
用 Proxy 代理 window，隔离全局变量 |
隔离性好，性能高，推荐 |
| 快照沙箱 |
挂载子应用前保存 window 快照，卸载时恢复 |
兼容性好，但性能略差（适合老浏览器） |
| iframe |
子应用运行在 iframe 中 |
隔离性最强，但性能差、通信复杂 |
3. 应用通信
| 方案 |
实现方式 |
适用场景 |
| Props |
基座通过 props 向子应用传递数据/方法 |
父子应用简单通信 |
| 全局状态 |
qiankun initGlobalState 或独立状态管理库（如 Pinia） |
多应用共享状态 |
| 事件总线 |
基于 CustomEvent 或第三方库（如 EventEmitter2） |
跨应用异步通信 |
4. 路由管理
- 基座路由：统一管理所有子应用的路由（如 Vue Router、React Router）；
- 子应用路由：子应用内部路由独立，需设置
base（如 Vue Router 的 base: '/vue'）；
- 路由切换：基座通过路由匹配规则加载/卸载子应用。
五、微前端最佳实践
1. 应用拆分策略
- 按业务域拆分：如用户中心、订单系统、数据分析等；
- 按功能模块拆分：如头部导航、侧边栏、内容区等（适合通用组件）；
- 避免过度拆分：子应用数量控制在合理范围（一般 5-10 个），避免增加维护成本。
2. 技术栈选型
- 基座：推荐用成熟技术栈（如 Vue3/React18），保持稳定；
- 子应用：根据团队能力和业务需求选择，优先与基座技术栈一致（降低通信成本）；
- 公共依赖：通过
externals 或模块共享方案（如 EMP）复用，减少子应用体积。
3. 测试与运维
- 独立测试：子应用可独立运行和测试，无需依赖基座；
- CI/CD：子应用单独配置 CI/CD 流程，实现独立部署；
- 监控：统一监控子应用的性能、错误（如用 Sentry）。
4. 渐进式迁移
- 先将非核心模块拆分为子应用，验证方案可行性；
- 逐步迁移核心模块，避免一次性大改；
- 保留老系统入口，通过微前端逐步替换。
总结
微前端的核心是“分而治之”，重点掌握：
- 基础概念：技术栈无关、独立部署、样式隔离、JS 沙箱；
- 主流框架：qiankun（推荐，开箱即用）、single-spa（灵活，需定制）；
- 核心问题：样式隔离、JS 沙箱、应用通信、路由管理；
- 最佳实践：合理拆分应用、渐进式迁移、独立测试部署。
根据项目规模和团队能力选择合适的方案，避免为了微前端而微前端（小型项目单体架构更高效）。