国内主流微前端技术, 并不稳定, 各有各的缺陷
qiankun
非常具有创新性, 国内微前端的代表, 也有缺点
- sandbox 不支持 Vite
qiankun 的沙箱基于对window/document的代理与劫持，与 ESM 模块加载机制冲突。 - script 被转换为 fetch
这会导致诸如 Webpack 5 的publicPath: "auto"等运行时能力失效，影响资源定位与部署策略。 - 显著的运行时性能损耗
沙箱对全局对象的深度代理，会导致 JS 执行性能明显下降。 - cssScope不成熟
micro-app
micro-app 在设计理念上与 qiankun 类似，问题也高度重合：
- sandbox不支持vite
- 样式隔离对现有主流组件库（Element Plus、Ant Design 等）不友好
wujie
隔离的太过彻底, 会带来性能、跨iframe通信、路由栈问题(github.com/Tencent/wuj…)
什么才是“合适”的微前端？
如果今天重新做一次技术选型，一个理想的微前端框架应当满足：
- ✅ 尽可能轻量化
- ✅ 对现有应用影响最小
- ✅ 不制造未来升级与技术债的“坑”
- ✅ 与现代工程体系（Vite / ESM）天然契合
微前端不该成为负担
什么微前端技术能惊动尤大?
它同时具备：
- 模块化
- 依赖共享
- HMR
- TypeScript
- Module Graph
- Debug 友好
并且拥有当前最活跃的生态与社区。
答案：Module Federation。
其实主要是因为它与 Vite 的 roadmap 重合。
（这里借用一下尤大顶流的流量 🙇♂️）
自我提交了module-federaiton/vite 1.0版本, 完成了MF的主要能力后, 现在周安装量已经达到60W
新方案：vite-mfe-federation
在完成 module-federation/vite 后，我搭建了一套：
- 轻量化
- 低侵入
- 可插拔 Sandbox
- 高性能
的微前端解决方案。
📦 项目地址：
👉 github.com/zhangHongEn…
核心理念：
轻量化、高性能、低负担
微前端常见问题
1️⃣ 远程模块如何实现 HMR？
- Vue 与 React 的实现方式不同
- 在 Module Federation + Chrome 插件 的组合下，可自动完成
- 不再需要额外的 hack 或重启
2️⃣ 弹出层如何处理 Sandbox？
常见问题组件：
- select
- date-picker
- modal / popup
- 所有向
body插入 DOM 的组件
在 vite-mfe-federation 中，通过 sandbox.overlaySelectors 精确解决该问题，而不是全局放开隔离。
结语
不合适的微前端方案一定是灾难。
希望这套实践，能给正在做或准备做微前端的你，提供一个更稳、更轻、更未来向的参考。
后续预告 《如何通过前端方案为公司节省每月20W》
