最近在面试中被多次问到“微前端”，对一些有实战经验的开发者来说可能已经驾轻就熟，但像我这样还没有在实际项目中用上它的，多少还是有些心虚。本篇文章不涉及太多代码，更多是从概念背景、常见场景和实现方案入手，希望帮像我一样只是“听过”微前端的同学，整理出一套能在面试中说得上话的理解框架。
前言
这些年来，使用 Vue、React 等框架很快就能起一个项目，但等业务做大了，项目就容易变得越来越臃肿，几百个页面、上万个组件，动不动构建十几分钟，改点小需求也容易牵一发而动全身。这种“巨石应用”不光维护成本高，开发体验也越来越差。
于是，大家开始想办法把这个“巨石”拆成一块一块的——按照业务模块拆，每块是一个独立的子应用，单独开发、单独部署、单独维护，甚至可以选择自己喜欢的技术栈。这样一来，团队协作效率和项目灵活性都能提升不少。
一、什么是微前端
微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，同时可以解决一些iframe的潜在问题。
tip：微服务就是把一个后端大系统按功能拆分成多个小服务，每个服务自己有自己的代码仓库、部署方式、技术选型，互不影响，靠轻量级的协议（比如 HTTP、消息队列）通信。这样改一个服务不会牵连整个系统，团队也可以并行开发，节奏互不干扰。
那前端能不能也这么玩？当然可以。尤其是现在前端业务越来越复杂，页面动不动就是几十个模块，团队多了还容易撞代码、抢资源，于是“微前端”应运而生⬇️
微前端好处
1. 更清爽的代码仓库，降低耦合
传统巨石应用最让人头疼的一点就是“一改全炸”，哪怕只是个小改动，也可能波及到几十个文件。微前端的好处就是把系统拆分成多个独立子应用，每个子应用对应一个业务模块，有自己独立的仓库。按业务边界拆，按团队分工划，每个模块自成体系、界限清晰，开发起来心里踏实，出了问题定位也快。
2. 独立开发、独立部署，彼此不拖后腿
子应用拆出来后，每个都可以独立开发、独立部署。构建时间缩短了，测试范围变小了，连上线都更轻松。你上线你的，我改我的，哪怕隔壁团队部署失败，也不影响我这边继续发版，开发体验直接上了一个台阶。
3. 技术栈无关，vue、react、angular 各玩各的也没问题
有的老项目还在用 Vue2，新项目已经上 Vue3 了，还有的用了 React，甚至 Angular。正常团队都不想为了一两个组件就全盘重构。微前端就允许大家“各用所长”：每个子应用选自己熟悉、适合的技术栈，照样能跑在一起。
微前端中主项目做什么
在微前端架构中，主项目更像“平台层”，它不负责具体业务实现，而是承担页面布局、路由分发、子项目注册与挂载、跨项目通信等通用职责，真正的业务功能由各子项目独立完成。
所以像一般的 axios 的封装等，不会在主项目中进行，他只管路由+布局+通信等。
二、微前端常见实现方式
1. single-spa（老牌）
- 只负责“路由调度”
- 没有沙箱、没有通信规范，一切你自己实现
- 不推荐新手使用，但很多框架都是它封装的
2. qiankun（蚂蚁）
- 基于
single-spa扩展 - JS 隔离：使用
Proxy实现沙箱 - 样式隔离：动态样式标签/可选 Shadow DOM
- 通信方式：props 传参 + 事件 + 状态共享
- 缺点：Vite 支持不好，不再活跃维护
3. micro-app（京东）
- 使用 Web Components 封装
<micro-app>标签 - JS 隔离：Proxy 代理
- 样式隔离：Scoped CSS + Shadow DOM
- 通信方式：事件通信（CustomEvent）+ props 注入
- 优势：Vite 支持原生，开发体验轻盈
4. wujie（腾讯）
- 用
iframe实现原生隔离 - DOM 被代理进主项目容器，解决布局割裂问题
- 通信方式：postMessage + 通道优化
- 适合政务、金融等高安全场景
5. Webpack 模块联邦
- 不是运行时集成，而是构建时“模块共享”
- 常用于 Monorepo 或统一构建场景
- 不适用于“技术栈完全独立”的子项目
总结
| 实现方式 | 说明 | 适用场景 |
|---|---|---|
single-spa | 最底层方案，只负责路由调度 | DIY 能力强的人用 |
iframe | 原生隔离最强，通信最弱 | 安全要求高、技术栈混杂 |
qiankun | 蚂蚁基于 single-spa 封装 | 功能全面，适合大团队 |
micro-app | 京东开源，现代轻量方案 | 支持 Vue3 和 Vite |
wujie | 腾讯开源，基于 iframe 做增强 | 安全级别最高 |
模块联邦 | Webpack 特性，构建时共享模块 | 模块化生态系统（如 Monorepo） |
简单对比
| 框架 | 是否支持 Vite | 隔离能力 | 接入难度 | 是否推荐新手 |
|---|---|---|---|---|
iframe | ✅原生支持 | ✅✅✅强 | ✅最低 | ✅（最容易理解） |
qiankun | ⚠️需插件，不稳定 | ✅✅强 | ⚠️中等 | ❌（不再维护） |
micro-app | ✅原生支持 | ✅✅强 | ✅低 | ✅✅（推荐） |
wujie | ✅原生支持 | ✅✅✅极强 | ✅低 | ✅（嵌入式场景） |
模块联邦 | ⚠️需插件 | ❌无 | ⚠️高 | ❌（非运行时微前端） |
qiankun 功能全但不再维护，micro-app 更轻、支持 Vue3/Vite、适合新手；iframe 隔离强，适合跨团队隔离；wujie 安全级别最高；Module Federation 属于模块共享，不是典型微前端。
三、结语
微前端就是把一个大系统拆成多个小系统，主项目统一调度、子项目独立运行。
常见方案中，iframe 最隔离，qiankun 功能多但已不维护，micro-app 相对友善，可以现在就去用 micro-app搭一套 demo，也就花个 10 分钟。
