JavaScript微前端_模块联邦与沙箱隔离方案
模块联邦实现跨应用模块共享，沙箱隔离保障运行时安全。1. 模块联邦通过 Webpack 5 的 ModuleFederationPlugin 允许应用间动态加载远程模块，支持独立开发部署、按需加载与依赖共享；2. 沙箱隔离采用代理式（Proxy）、快照式或 iframe 方案，防止全局变量污染；3. 两者结合构建安全高效微前端体系，如 qiankun 基于此实现自动加载与隔离，确保子应用独立运行且互不干扰。
微前端架构中，模块联邦和沙箱隔离是两个关键方案，分别解决模块共享与运行时安全的问题。模块联邦让不同应用间能直接共享代码，而沙箱隔离确保子应用之间互不干扰。下面从实际应用角度说明这两个方案的核心机制与实现方式。
模块联邦：实现跨应用模块共享
模块联邦是 Webpack 5 提出的一种模块共享机制，允许一个应用在运行时动态加载另一个应用暴露的模块，无需发布到 npm 或构建时打包。
其核心优势在于：
- 独立开发部署：各微前端应用可独立构建、发布，不影响主应用或其他子应用
- 按需加载远程模块：通过配置远程应用的入口地址，主应用可在运行时加载指定模块
- 共享依赖减少体积：多个应用可共享同一版本的第三方库（如 React、Lodash），避免重复打包
以 Webpack 配置为例：
new ModuleFederationPlugin({name: 'app1',
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
这样 app1 就可以 import('app2/Button') 直接使用 app2 暴露的组件。
沙箱隔离：保障运行时环境安全
微前端中多个子应用可能同时运行，若不加限制，容易因变量污染、全局对象修改导致冲突。沙箱机制用于隔离子应用的执行环境。
常见实现方式包括：
- 快照式沙箱（SnapshotSandbox）：在子应用加载前记录全局状态快照，卸载时恢复。适用于非频繁切换场景
- 代理式沙箱（ProxySandbox）：通过 Proxy 拦截对 window 的读写操作，实现精细控制。现代框架常用此方式
- iframe 沙箱：利用 iframe 天然隔离特性，但通信复杂且样式受限，适合高安全要求场景
例如，在加载子应用前创建代理沙箱：
const sandbox = new Proxy(window, {set(target, prop, value) {
if (isInSandboxApp) {
target[prop] = value;
return true;
}
throw new Error('不允许修改全局变量');
}
});
配合作用域绑定，确保子应用中的 this、window 指向沙箱环境。
结合使用：构建安全高效的微前端体系
模块联邦解决“怎么共享”，沙箱隔离解决“如何安全运行”。两者结合才能构建稳定微前端架构。
典型流程如下：
- 主应用通过模块联邦引入子应用的入口模块
- 加载子应用资源前，创建沙箱环境并激活
- 子应用在沙箱中执行，访问受限的全局对象
- 子应用卸载时，清除副作用
并恢复全局状态
并恢复全局状态主流微前端框架如 qiankun，底层正是基于模块联邦（或类似机制）+ 动态沙箱实现的自动隔离与加载。
基本上就这些。模块联邦提升协作效率，沙箱隔离保障系统稳定性，两者缺一不可。实际落地时还需考虑样式隔离、路由冲突、通信机制等配套方案。
