入门
创建日期:2026-08-29 | 最近更新:2026-08-30
qiankun 是什么
qiankun 是蚂蚁开源的微前端框架,基于 single-spa 封装,核心能力是让多个独立的前端应用(不同技术栈、不同团队)共存在同一个页面里,彼此沙箱隔离、互不干扰。
它的口号是"可能是你见过最完善的微前端解决方案"——相比裸用 iframe 或自研方案,qiankun 把「应用加载、JS 沙箱、样式隔离、通信」这几件脏活都封装好了。
为什么不用 iframe
iframe 是浏览器原生的隔离方案,但工程上有硬伤:
| iframe 问题 | 后果 |
|---|---|
| 每次创建都是全新文档环境 | 内存 / 计算开销大 |
| 事件冒泡不穿透 | 主应用无法统一劫持快捷键、做全局处理 |
| 路由不同步 | 子应用跳转后刷新丢状态 |
| 登录态 / Cookie 不共享 | 子应用要重新登录 |
| 通信繁琐 | postMessage 写起来很痛苦 |
qiankun 的方案:JS 用 Proxy 沙箱隔离、CSS 用样式隔离,DOM 就在主应用容器里——没有 iframe 的割裂感。
核心概念
- 主应用(基座):负责搭建框架、注册子应用、管理导航和公共逻辑;
- 子应用:独立开发、独立部署的微应用,通过约定的生命周期钩子接入;
- HTML Entry:子应用以"一个 HTML 页面"为入口,qiankun 拉取 HTML 后解析出 JS/CSS 再注入执行——比 JS Entry 灵活(不用关心子应用怎么打包);
- 沙箱:默认 Proxy 沙箱,隔离全局变量;样式默认用「运行时作用域」隔离,可开 Shadow DOM。
适用场景
- 老系统集成:多个历史系统(jQuery、老 Vue、老 React)要合并成一个统一入口,但不想重写;
- 多团队协作:不同团队各自负责一个模块(如中台、商城、报表),独立发版;
- 渐进式迁移:巨石应用太重,想按路由/模块拆出来,用微前端过渡;
- 技术栈并存:不同业务适合不同框架(Vue + React 并存),互不升级绑架。
安装
npm i qiankun # 主应用装
子应用不需要装 qiankun,只需要导出约定的生命周期函数。