微前端的 JS 沙箱(Sandbox)是怎么实现的?快照沙箱 vs Proxy 沙箱?
JS 沙箱让多个子应用互不污染全局变量(window)。
- 快照沙箱(Snapshot):子应用挂载前记录 window 快照,卸载时还原、挂载时恢复各自的增改。实现简单,但不支持多个子应用同时激活(会互相覆盖快照)
// 伪代码
const snapshot = {}
function mount() { for (k in window) snapshot[k] = window[k] /* 保存 */; applyAppGlobals() }
function unmount() { for (k in window) delete window[k]; restore(snapshot) }- Proxy 沙箱(主流):用
new Proxy(window, {...})为每个子应用创建独立的 fakeWindow,读写都落在自己的沙箱对象上,原 window 不动。支持多实例并发、更安全
qiankun 现代版本默认用 Proxy 沙箱(兼容降级到快照);iframe 方案则天然靠浏览器的同源隔离。