微前端沙箱原理深度剖析：为什么iframe被淘汰？Qiankun如何实现JS隔离？
简介：从 iframe 到 Qiankun 的进化史，正是前端工程师对“隔离”与“共享”这对矛盾不断平衡的探索史。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~
当一个电商平台的前端团队同时维护着商品、支付、物流三个模块，每个模块都有自己的技术栈和迭代节奏时，如何让这些“各自为政”的模块在同一个页面里和谐共存？微前端技术给出了答案，而沙箱，就是保证这种“和谐”的核心机制。
沙箱的本质是为每个子应用打造一个独立的运行环境，防止不同应用之间的代码、样式、状态相互干扰。就像实验室里的培养皿，每个子应用在自己的“培养皿”中生长，既不会污染外界，也不会被外界污染。在微前端架构中，沙箱技术的优劣直接决定了整个系统的稳定性和兼容性，而 iframe 的逐渐退场与 Qiankun 的崛起，正是沙箱技术迭代的最佳注脚。
class SnapshotSandbox {constructor() {this.snapshot = new Map(); // 全局对象快照this.modifiedProps = new Map(); // 子应用修改记录}activate() {// 仅保存当前window状态快照Object.getOwnPropertyNames(window).forEach(key => {this.snapshot.set(key, window[key]);});}deactivate() {// 检测并还原变更Object.getOwnPropertyNames(window).forEach(key => {if (window[key] !== this.snapshot.get(key)) {this.modifiedProps.set(key, window[key]); // 记录修改window[key] = this.snapshot.get(key); // 还原快照}});// 清理新增属性Object.getOwnPropertyNames(window).filter(key => !this.snapshot.has(key)).forEach(key => {delete window[key];});}}
class ProxySandbox {constructor() {this.globalContext = {}; // 使用标准对象存储私有变量const fakeWindow = {}; // 空代理目标this.proxyWindow = new Proxy(fakeWindow, {get: (_, key) => {// 安全检测私有属性if (Object.prototype.hasOwnProperty.call(this.globalContext, key)) {return this.globalContext[key];}return window[key]; // 兜底到真实window},set: (_, key, value) => {this.globalContext[key] = value;return true;}});}// 子应用运行入口run(code) {const fn = new Function('window', code);fn.call(this.proxyWindow, this.proxyWindow);}}
三、从技术选型看沙箱设计的核心原则
iframe 的淘汰和 Qiankun 的成功，揭示了微前端沙箱设计的三大核心原则：
1. 平衡隔离与共享：拒绝“一刀切”
完全隔离（如 iframe）会导致资源浪费和交互割裂，而完全共享则会引发冲突。优秀的沙箱应像“智能防火墙”——严格隔离私有状态（如子应用的全局变量、样式），但允许共享公共资源（如基础库、工具函数）。Qiankun 通过excludeAssetFilter配置，让子应用可以共享父应用的React、Lodash等资源，减少重复加载。
2. 性能优先：避免“过度设计”
沙箱的隔离机制不能以牺牲性能为代价。快照沙箱的“全量比对”在复杂应用中会产生延迟，而代理沙箱通过细粒度拦截将损耗控制在 5% 内。选型建议：
- 小型单实例应用：快照沙箱（复杂度低）
- 大型多实例应用：代理沙箱（隔离性强）
3. 兼容性兼容：兼顾“过去”与“未来”
前端技术栈的多样性要求沙箱具备良好的兼容性。Qiankun 支持 Vue/React/Angular 甚至 jQuery 的关键在于非侵入式设计——子应用无需改造代码即可接入。对比某些需强制使用setGlobal的方案，大幅降低迁移成本。
结语：沙箱技术的下一站——Web Component 与容器化
随着 Web Component 标准的成熟，未来的微前端沙箱可能会向“组件化容器”演进。通过自定义元素（Custom Element）封装子应用，结合 Shadow DOM 实现原生隔离，再配合 ES 模块（ESM）的静态分析能力优化资源加载，或许会形成比 Qiankun 更轻量的解决方案。
但无论技术如何迭代，沙箱的核心使命始终未变：让不同的应用既能“各自为战”，又能“协同作战”。从 iframe 到 Qiankun 的进化史，正是前端工程师对“隔离”与“共享”这对矛盾不断平衡的探索史。
写在最后