当主应用依赖 Vue 2 来渲染后台管理界面，而某个嵌入式子应用已经升级到 Vue 3 时，如果把两者打包进同一个 Webpack 产物，运行时就可能出现共享模块版本覆盖、初始化顺序错乱甚至组件渲染失败的问题。Webpack 5 引入的隐居宇宙（Secluding Universe）机制正是为了解决这类模块隔离难题。它不再假设整个应用只有一个全局模块命名空间，而是允许构建产物中存在多个相互独立的模块宇宙，每个宇宙拥有自己的模块缓存、chunk 加载器和运行时状态，从而让不同版本的依赖安全地共存于同一页面。
隐居宇宙并不是一个凭空出现的概念，它的实现依托于 Webpack 5 对运行时能力的重构。在 Webpack 4 时代，所有模块的注册信息通常挂载在同一个全局数组或对象上，模块 ID 的分配从 0 开始递增，一旦两个异步 chunk 都引入了不同版本的 lodash，后加载的 chunk 会覆盖先前的模块定义。而 Webpack 5 通过把模块注册表、公共路径、chunk 加载队列以及热更新状态打包进独立的运行时容器，为隔离提供了底层基础。
一、从全局污染到独立运行时：为什么需要隐居宇宙
传统的 Webpack 产物在浏览器中执行时，会在一个共享的作用域里维护模块映射表。以一个常见的多页面应用为例，如果页面 A 引入了 lodash 3.x，页面 B 引入了 lodash 4.x，而它们被合并到同一个入口或同时出现在同一个异步加载流程中，Webpack 只会保留最后注册的那个版本。早期解决方案是使用 externals 把公共库挂载到 window 上，再通过脚本标签加载指定版本，但这种方式破坏了按需加载能力，也让依赖版本管理变得复杂。
更隐蔽的问题发生在微前端场景。假设主应用通过 Module Federation 暴露了一个共享 React，子应用却自带 React 17 的完整实例。由于运行时共享了模块解析上下文，子应用内部对 React 的引用可能被错误地指向主应用的 React 18，导致 Hooks 调用顺序异常。隐居宇宙通过给每个构建入口或异步块打上独立的 universe 标识，使模块解析时优先在自身宇宙内查找依赖，从根源上切断了跨应用的隐式共享。
还需要注意，这种隔离不是简单的代码分包。普通的 splitChunks 只是把公共代码抽离成单独文件，运行时依然只有一个模块注册表，不同版本的包名冲突依然存在。而隐居宇宙会为每个宇宙生成独立的模块注册表和加载器闭包，即使两个宇宙都引入了名为 lodash 的包，它们在内存中也是完全不同的对象实例，互不影响。
二、Secluding Universe 的核心机制与配置方法
在 Webpack 5 中，隐居宇宙通过实验性配置开启。最基础的用法是把 experiments 下的 secludingUniverse 设置为 true，这样每个 entry 都会自动获得一个独立宇宙。对于异步加载的 chunk，可以使用魔法注释来显式指定宇宙边界，例如 import 时加上 webpackUniverse 参数。这种方式不会改变业务代码的同步导入语法，只在构建阶段控制运行时容器的分配策略。
下面的配置展示了如何让三个入口分别运行在三个不同的宇宙中，同时保持 webpack 的默认优化行为。需要注意的是，universe 名称会被编译成前缀写入模块 ID，因此应避免使用可能影响文件系统的特殊字符。
// webpack.config.js
module.exports = {
mode: 'production',
entry: {
dashboard: './src/dashboard.js',
legacy: './src/legacy.js',
analytics: './src/analytics.js'
},
experiments: {
secludingUniverse: true
},
output: {
filename: '[name].[contenthash].js',
universe: '[name]'
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
universe: 'shared'
}
}
}
}
};
上述配置中，每个入口文件会生成独立的运行时闭包，而 vendors 公共依赖被放入一个共享宇宙。共享宇宙中的模块可以被多个入口复用，但它们不会直接注入到任意入口的全局作用域，而是通过 Webpack 运行时提供的跨宇宙引用机制进行访问。这种设计既保留了公共代码的缓存收益，又避免了强制共享带来的版本约束。
从实现原理上看，每个宇宙内部维护着自己的 chunk 映射表、模块缓存和已加载状态。当代码执行到 import 语句时，运行时首先根据当前宇宙标识定位对应的模块注册表，如果模块不在该宇宙中，再根据共享声明去其他宇宙查找。查找流程通过 Webpack 生成的 universal require 函数完成，该函数会在多个宇宙注册表之间切换解析上下文，但业务侧完全无感知。
三、多版本依赖共存实战：Vue 2 与 Vue 3 同页运行
下面通过一个实际场景来验证隐居宇宙的效果。假设一个后台管理系统的主干部分基于 Vue 2 开发，而最近新增的数据大屏子应用使用了 Vue 3 和 Composition API。如果直接合并构建，Vue 2 和 Vue 3 都会向全局注入名为 Vue 的变量，导致运行时冲突。我们通过给两个子应用分配不同的宇宙来解决问题。
先在入口文件中使用动态导入并指定宇宙标识。主应用保留默认宇宙，数据大屏指定为单独宇宙，这样两个 Vue 实例的初始化过程完全隔离。
// src/dashboard.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');
// 独立加载数据大屏，指定其运行在 data-universe 宇宙
const loadDataScreen = () => import(
/* webpackChunkName: "data-screen" */
/* webpackUniverse: "data-universe" */
'./data-screen/entry.js'
);
loadDataScreen().then(({ bootstrap }) => bootstrap());
// src/data-screen/entry.js
import { createApp } from 'vue';
import DataScreen from './DataScreen.vue';
export function bootstrap() {
createApp(DataScreen).mount('#data-screen');
}
构建后，主包和数据大屏包会各自包含一个 Vue 运行时。即使两个 Vue 版本都暴露了全局 Vue 变量，由于它们处于不同的宇宙，主应用对 Vue 的引用不会受到影响。在浏览器开发者工具中观察，两个宇宙的模块缓存位于不同闭包中，修改数据大屏内部的 Vue 状态不会触发主应用组件的重新渲染。这种隔离对微前端架构尤其重要，因为各团队可以独立升级依赖，无需等待整体迁移。
如果主应用和大屏还需要共享某些基础库，比如 axios，可以在配置中把 axios 放入 shared 宇宙，并让两个入口都从 shared 中引用。这样既避免了重复打包，又不会因为 axios 的不同版本产生冲突。共享宇宙的模块默认只读，业务宇宙无法修改共享模块的内部状态，从而保证缓存一致性。
// webpack.config.js 片段
optimization: {
splitChunks: {
cacheGroups: {
axios: {
test: /[\\/]node_modules[\\/]axios[\\/]/,
name: 'shared-axios',
chunks: 'all',
universe: 'shared',
enforce: true
}
}
}
}
四、性能开销与划分策略
隐居宇宙虽然解决了依赖隔离问题，但每个独立宇宙都会额外生成一份运行时骨架，包括模块注册表、chunk 加载器以及公共路径处理逻辑。如果项目中有几十个宇宙，初始包体积和内存占用会明显增加。因此不应按照组件粒度无限拆分宇宙，而应该以应用边界或团队边界为划分依据。通常一个页面中的主应用、子应用、第三方插件可以各自占据一个宇宙，同一团队内部的功能模块仍建议使用普通异步 chunk 加载。
另一个需要注意的问题是跨宇宙模块的缓存失效。由于不同宇宙的模块 ID 带有宇宙前缀，当某一个宇宙的代码发生变化时，只有该宇宙对应的 chunk 哈希会改变，其他宇宙的缓存可以继续沿用。但如果共享宇宙发生变化，所有依赖该共享宇宙的入口都需要更新引用，这可能导致缓存命中率下降。可以通过设置 runtimeChunk 把共享宇宙的运行时单独抽离，便于做长效缓存。
// webpack.config.js 片段
optimization: {
runtimeChunk: {
name: entrypoint => `runtime-${entrypoint.name}`
}
}
最后要意识到，隐居宇宙并不是万能的。如果两个宇宙之间需要频繁地传递复杂对象或函数，跨宇宙通信会产生额外的序列化和运行时开销。此时更合理的做法是把通信边界收敛到少量接口上，让宇宙之间只通过事件或简单数据交互，而不是直接共享可变状态。对于大多数微前端和插件化场景，这种隔离策略带来的收益远大于少量性能损耗。
总结来说，Webpack 5 的隐居宇宙机制为前端工程化提供了一种精细的模块隔离手段。它让我们不再依靠全局变量约定或手动 externals 来避免依赖冲突，而是把模块运行环境本身作为可配置的构建单元。合理规划宇宙边界，可以让不同技术栈、不同版本依赖的应用在同一页面内稳定共存，也为后续的增量迁移和团队自治打下基础。