主流方案对比：iframe / single-spa / qiankun / Module Federation

本节目标

微前端落地有四条主流路线，隔离能力和开发体验是跷跷板的两端：

方案            隔离粒度      独立部署   通信难度   适用场景
─────────────────────────────────────────────────────────────
iframe          进程级(最彻底)  ✅        难(跨域/PostMessage)  最怕样式冲突、求稳的历史系统嵌入
single-spa      路由级         ✅        中(需自己接通信)      只要路由组合、不要沙箱
qiankun         路由级+沙箱    ✅        易(全局状态/事件)      中后台、要 JS/样式隔离
Module Feder.   模块级         ✅        易(import 远程)   组件/函数级共享、现代构建链

iframe：最简单也最彻底——每个子应用跑在独立 <iframe> 里，JS、DOM、样式天然隔离，浏览器替你搞定。短板是通信只能靠 postMessage、路由难统一、弹窗/全屏体验割裂、SEO 差。适合「把老系统原样嵌进来、求稳」。

single-spa：路由级组合的开山鼻祖。它只负责「按路由切换挂载哪个子应用」，不提供隔离——JS 全局变量、样式都会互相污染，沙箱和通信要自己接。轻，但坑得自己填。

qiankun：基于 single-spa 封装，补齐了最关键的两块——JS 沙箱（Proxy 快照隔离全局变量）和样式隔离（Shadow DOM / scoped），还自带 initGlobalState 通信。中后台微前端的事实标准，开箱即用。

Module Federation（模块联邦）：Webpack 5 / Rspack 的原生能力，粒度最细——不是「整页替换」，而是「运行时 import 对方的组件/函数」。子应用独立部署，主应用直接 import('remote/Button')。适合「组件级复用、共享依赖」，是现代最热的方向。

名词解释

iframe 沙箱：浏览器原生的隔离机制，每个 iframe 有独立的 window/document，天然互不污染。代价是通信和路由体验差。

路由级拆分：按 URL 路径把页面切成不同子应用（如 /order/* 给订单团队、/goods/* 给商品团队），single-spa / qiankun 都走这条路线。

模块级共享：不切整页，而是运行时直接加载对方的导出（组件、工具函数），Module Federation 走这条路线，粒度更细、复用更灵活。

课后练习

练习 1：为什么 qiankun 比裸 single-spa 更适合中后台？

答案：中后台子应用常「不小心」往 window 挂全局变量、共用 CSS 类名，裸 single-spa 不做隔离会互相污染。qiankun 内置 JS 沙箱 + 样式隔离，把这些坑填平了，团队不用每人都懂沙箱原理也能安全并行。

练习 2：Module Federation 和 qiankun 能一起用吗？

答案：能，但通常是「二选一」为主。qiankun 解决「整页级组合 + 隔离」，Module Federation 解决「组件级共享」。有的架构用 qiankun 管页面壳、内部再靠 Module Federation 共享公共组件库，属于进阶玩法。

总结

选方案的口诀：求稳嵌入老系统 → iframe；只要路由组合、自己能填沙箱 → single-spa；中后台要开箱隔离 → qiankun；组件/函数级共享、现代构建 → Module Federation。记住一条主线：iframe/single-spa/qiankun 是「路由级整页组合」，Module Federation 是「模块级细粒度共享」，这是两条本质不同的路线。下两节我们实打实写一遍 qiankun 的基座与子应用。