qiankun解决的问题
- 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 环境，解决全局变量冲突、样式污染、多实例运行等问题，是微前端稳定运行的核心保障。