- qiankun 中的沙箱机制是如何实现的?解决了什么问题?
一、实现方式
qiankun 的沙箱机制主要用于隔离微应用之间的运行环境,避免相互影响。其核心实现基于两种策略:
- 快照沙箱(SnapshotSandbox)
适用于不支持 Proxy 的低版本浏览器。
每次微应用切换时,记录 window 的状态(如全局变量),卸载时恢复原状态。
缺点:性能差、不支持多实例并发。
- Proxy 沙箱(ProxySandbox)
主要依赖于 Proxy 实现沙箱。
为每个微应用创建一个 Proxy(window) 的代理对象,拦截所有对 window 的修改,限制作用域。
示例:
const sandbox = new Proxy(window, {
set(target, prop, value) {
// 只修改沙箱中的对象,不影响全局
sandboxState[prop] = value;
return true;
},
get(target, prop) {
return sandboxState.hasOwnProperty(prop) ? sandboxState[prop] : target[prop];
}
});
优点:性能好,支持多个微应用并发运行。
- 样式隔离机制
除了 JS 沙箱外,还支持样式隔离:
Scoped CSS:通过添加前缀/标记隔离样式。
Shadow DOM:更彻底的样式隔离(实验性)。
二、解决的问题
- 全局变量污染
每个微应用都可能操作 window,如 window.appName = ‘a’,会造成冲突。
沙箱确保这些变量只在自己的作用域内生效。
- 样式冲突
不同微应用中的 CSS 可能互相覆盖。
样式隔离防止样式干扰。
- 多实例并发运行
Proxy 沙箱允许多个微应用同时存在于页面中,互不影响。
- 应用卸载时状态回滚
退出微应用时能恢复主应用或其它子应用原本的状态。
三、总结一句话
qiankun 通过 Proxy 等技术实现沙箱机制,有效隔离微应用之间的 JS 和 CSS 环境,解决全局变量冲突、样式污染、多实例运行等问题,是微前端稳定运行的核心保障。