Webpack 5 的模块联邦允许构建产物在运行时互相引用，但远程应用发布新版本、暂时下线或网络抖动时，宿主应用往往会因为某个远程 chunk 无法加载而抛出异常。Disconnecting Universe 断开宇宙正是面向这一场景的运行时隔离策略。它把每一个远程依赖看作一个独立的宇宙，当该宇宙不可达时，不直接拖垮整个宿主，而是将其从依赖图中摘除，并触发预设的降级动作。
为什么需要断开远程依赖
模块联邦的设计目标之一，是让多个独立构建的应用能够共享运行时模块。宿主通过 remote 条目加载远程入口，远程模块被封装在独立的共享作用域中。正常情况下，当执行 import('remote_app/Button') 时，Webpack 会在远程模块注册表中查找名称并返回对应模块。如果远程没有注册该模块，或者加载远程入口脚本超时，错误会沿着调用栈传播。对于单体前端或微前端架构，这种传播会造成局部白屏，甚至影响主框架初始化。
传统方案是在加载前做健康检查，或者给 import 加 try catch。这种方式只能处理首次加载失败，无法解决已经加载成功但后续远程更新导致运行时不一致的问题。Disconnecting Universe 的核心价值在于，它不只是在 Promise 失败时捕获错误，而是真正从当前构建图中移除远程共享作用域。移除后，后续 import 不会再次尝试访问已经失联的远程，而是立即进入回退状态，避免重复超时和重复错误日志。
断开动作还能释放远程模块占用的内存引用。Webpack 5 默认会维护远程容器的引用，除非宿主页面刷新，否则这些引用很少被主动清理。断开宇宙会通知运行时清理对应 chunk 的缓存和共享作用域，让垃圾回收有机会回收远程代码。这个特性对需要长时间运行的桌面端或控制台应用尤其有用。
配置与运行时 API
要启用断开宇宙能力，需要在 ModuleFederationPlugin 中设置 universe 选项。该选项不是远程容器的开关，而是全局策略描述。比如设置断开策略为 fallback，超时时间为 3000 毫秒，断开后是否保留全局共享依赖等。
// webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: {
publicPath: 'auto',
},
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
remote_app: 'remote_app@http://127.0.0.1:3001/remoteEntry.js',
},
universe: {
disconnectPolicy: 'fallback',
timeout: 3000,
keepSharedModules: true,
},
}),
],
};
其中 disconnectPolicy 控制断开后的行为，fallback 表示远程不可达时立即返回本地回退模块；strict 会抛出异常但移除远程作用域；log 只记录不执行断开。timeout 是远程 chunk 加载的超时阈值，超过后触发断开检查。keepSharedModules 支持在断开单个远程时继续保留 Webpack 共享依赖，例如 react、vue 等，避免多个远程都依赖同一共享模块时被误清理。
运行时可以主动调用 __webpack_require__.disconnectUniverse 断开指定远程。这个方法接收远程名称作为参数，返回一个 Promise。断开完成后，宿主依赖图中不再包含该远程作用域，后续 import 会直接走回退策略。
// 宿主运行时主动断开远程模块
if (window.__webpack_require__ && window.__webpack_require__.disconnectUniverse) {
window.__webpack_require__.disconnectUniverse('remote_app');
}
实战：给远程模块加回退层
在一个真实项目中，远程模块可能是一个商品推荐组件。宿主页面希望在远程服务挂掉时展示静态推荐或空状态。可以通过包装 import 实现回退逻辑。当远程模块加载失败时，先主动断开该远程，避免后续请求继续等待，然后返回本地回退组件。
// 加载远程组件，带断开回退
async function loadRecommendation() {
try {
const module = await import('remote_app/Recommendation');
return module.default;
} catch (error) {
// 主动断开该远程，避免后续请求继续等待
if (window.__webpack_require__ && window.__webpack_require__.disconnectUniverse) {
await window.__webpack_require__.disconnectUniverse('remote_app');
}
return FallbackRecommendation;
}
}
这里没有在 catch 中只做日志输出，而是执行了断开动作。这样做有两个好处：第一，后续同类型的 import 不会再走网络加载和超时流程，省去无效等待；第二，远程共享作用域被及时清理，降低内存压力。对于 React 或 Vue 项目，可以将这个加载逻辑封装到自定义 Hook 或异步组件工厂中，上层组件完全感知不到远程是否已经断开。
回退组件本身应该保持轻量，避免引入额外依赖。如果回退组件很大，反而会拖慢宿主首屏。通常建议回退内容使用宿主已有的基础组件，例如按钮、占位符或提示文案。如果业务允许，也可以返回空状态并记录一条结构化日志，方便排查远程故障。
断开宇宙与构建体积及缓存的关系
断开策略会影响 chunk 拆分。当模块联邦插件检测到 universe 配置后，会为每个远程生成一个独立的撤销运行时片段，记录共享作用域的导出表和依赖关系。这部分额外代码通常只有几百字节，不会造成明显体积增加。但如果 remote 很多，每个远程都会多一个小的关系描述，构建时需要权衡。
与官方推荐的 persistent caching 一起使用时，断开宇宙的状态不能直接写入磁盘缓存。远程是否断开属于运行时状态，和构建产物无关。因此启用该特性后，需要确保运行时状态与持久化缓存分离。简单做法是把断开记录放在内存 Map 中，不参与模块缓存序列化。
最后要注意版本一致性。如果宿主和远程使用不同 Webpack 5 小版本，运行时可能没有 disconnectUniverse 方法。建议在调用前做能力检测。宿主侧可以单独升级，远程不需要感知断开逻辑。断开动作只影响宿主当前页面的依赖图，不会反向通知远程容器。
Webpack 5模块联邦Disconnecting Universe修改时间：2026-10-06 04:43:59