Holding Universe 这个说法最早来自 Webpack 5 发布周期中社区对一系列架构级改动的概括性称呼，它并不是官方文档里的正式术语，而是开发者对 Webpack 5 所带来的持久化缓存、模块联邦、更好的 Tree Shaking 等一系列能力的一种形象化描述，意思是这套新机制像一个自洽的宇宙，能够把构建过程中的所有信息长期持有下来。本文将围绕这套体系中最核心的三个部分展开：持久化缓存、模块联邦与构建性能优化，帮助你从原理到实践完整理解它。
一、持久化缓存：让构建记住上一次的世界
Webpack 4 时代的缓存主要依赖 cache: true 配合内存缓存，一旦进程结束，缓存就消失了。下次启动开发服务器或者执行构建时，所有的模块都需要重新编译、重新解析依赖图，大型项目动辄等待几分钟。Webpack 5 引入了基于文件系统的持久化缓存，把模块的解析结果、依赖关系、生成代码等中间产物序列化到磁盘上，下次构建时直接复用。
它的开启方式非常简单，在配置文件中指定缓存类型和存放目录即可：
// webpack.config.js
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
// 把配置文件本身纳入依赖，配置变了缓存自动失效
config: [__filename]
},
cacheDirectory: path.resolve(__dirname, '.webpack_cache'),
version: '1.0'
}
};
这里有几个关键点值得展开。第一是 buildDependencies，它告诉 Webpack 哪些文件的变化应该导致缓存整体失效。除了配置文件，如果你的项目里有 babel 配置、postcss 配置，也建议加进来，否则修改这些文件后可能读到过期缓存，产出生成的代码不符合预期。第二是 version 字段，当你升级依赖或者切换分支后怀疑缓存污染时，改一下版本号就能强制重建，比手动删除缓存目录更优雅。
实际测试中，持久化缓存对二次构建的提速效果非常明显。一个包含上千个模块的中型项目，冷启动可能需要四五十秒，而热缓存命中后往往能压缩到几秒。需要注意的是，团队协作时要把缓存目录加入 .gitignore，避免把大量序列化文件提交到仓库里。
二、模块联邦：多个应用共享同一个宇宙
如果说持久化缓存解决的是单项目的构建速度，那么模块联邦解决的就是跨项目的模块共享问题。它允许一个独立部署的应用在运行时动态加载另一个应用暴露出来的模块，这是微前端架构在 Webpack 层面的原生支持，不再需要借助 external 脚本或者运行时注入这类 hack 手段。
模块联邦的核心概念有三个：宿主应用、远程应用与共享依赖。看一个最小化的配置示例：
// 远程应用：暴露一个组件给外部使用
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.vue'
},
shared: {
vue: { singleton: true, eager: false }
}
})
]
};
// 宿主应用：声明要消费哪个远程的哪些模块
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://cdn.ipipp.com/remote/remoteEntry.js'
},
shared: {
vue: { singleton: true }
}
});
宿主应用里可以直接 import('remoteApp/Button') 动态引入远程模块，Webpack 会在运行时加载远程的 remoteEntry.js，解析出模块的实际地址再按需拉取。shared 配置则负责处理公共依赖去重：singleton: true 保证整个页面里 Vue 这类有状态依赖只存在一个实例，避免出现两个不同版本的运行时互相干扰，这是接入时最容易踩的坑之一。
版本协商机制也值得理解。当宿主和远程对同一个共享依赖的版本要求不一致时，Webpack 会加载满足所有消费者要求的最高版本；如果版本范围完全没有交集，构建时会给出警告，运行时可能降级加载各自版本。因此在制定微前端规范时，团队应该约定好公共依赖的版本策略，否则线上排查成本会很高。
三、构建性能与产物优化：更聪明的宇宙法则
除了上述两大特性，Webpack 5 在产物生成层面也做了一次大扫除。长期废弃的功能被移除，Node.js polyfill 不再默认注入。以前即使你的前端代码只在浏览器运行，Webpack 4 也会为 process、path 等核心模块自动注入填充代码，导致产物体积膨胀；Webpack 5 改为需要开发者显式声明 fallback，倒逼大家写出更纯净的浏览器端代码。
Tree Shaking 方面新增了对嵌套导出和副作用分析的能力。配合 sideEffects 字段，未被使用的模块可以更彻底地从产物中剔除。同时，产物内部新增了模块Id 与导出名的确定性算法，即使增删文件也不会导致其他模块的 hash 大面积变化，这对浏览器缓存的命中率是实打实的提升。相关的配置思路如下：
module.exports = {
optimization: {
moduleIds: 'deterministic',
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: 20
}
},
output: {
filename: 'js/[name].[contenthash:8].js'
}
};
contenthash 基于文件内容计算，只要内容不变，文件名不变，客户端缓存就能长期有效。而 deterministic 的模块Id 算法保证了增删模块时的稳定性，两者结合是长期缓存的最佳实践组合。
四、迁移建议与常见坑
从 Webpack 4 迁移到 5，建议分三步走。第一步先升级到 Webpack 4 的最新小版本并处理废弃警告，这一步解决的信息量最大。第二步升级主版本，逐个处理 loader 与插件的兼容问题，老版本的 copy-webpack-plugin、html-webpack-plugin 都需要升级到支持 5 的大版本。第三步清理 Node.js polyfill 相关报错，按需为特定依赖配置 resolve.fallback。
另外提醒两个高频坑。一是持久化缓存偶尔会出现脏缓存现象，表现为修改代码后产物不更新，此时优先检查 buildDependencies 是否覆盖了所有影响构建的配置文件，再考虑用 version 字段强制失效。二是模块联邦的远程应用在低版本浏览器上需要额外的 promise polyfill，因为其运行时依赖原生的 Promise 语义。理解了这些机制，你会发现所谓持有宇宙，本质上就是 Webpack 5 把构建过程中的每一段信息都尽可能地记录、复用与共享，让整个前端工程体系跑得更稳更快。
Webpack 5Holding Universe模块联邦修改时间：2026-09-01 02:59:00