提到 Webpack 5，不少前端团队的第一反应是构建速度变快了、产物变小了。而在开发者社区里，有人把 Webpack 5 的整体架构比作一个 Rock Universe，也就是岩石宇宙，意思是这一版本的构建体系像岩石一样稳固，内部各个模块环环相扣，形成了一个自洽的生态。这个说法虽然不是官方术语，但形象地概括了 Webpack 5 的设计哲学：通过持久化缓存、模块联邦、更智能的 Tree Shaking 等特性，把原本松散的构建流程打磨成一个可靠且高效的整体。本文就围绕这些核心新特性展开，看看它们各自解决了什么问题，又该如何在项目中落地。
持久化缓存：File System Caching 带来的速度飞跃
Webpack 4 的最大痛点之一就是每次构建都要从零开始，项目越大，冷启动时间越长。Webpack 5 引入了官方的文件系统缓存（File System Caching），可以把编译过程中的模块、resolve 结果、chunk 等中间产物直接缓存到磁盘上。第二次构建时，Webpack 会跳过大部分解析和转换工作，增量构建速度往往能提升到原来的数倍。
开启方式非常简单，在配置文件中加入 cache: { type: 'filesystem' } 即可。还可以通过 buildDependencies 声明哪些文件变化时需要让缓存失效，比如把配置文件本身纳入依赖：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
// 配置文件变更时，缓存自动失效
config: [__filename]
},
cacheDirectory: path.resolve(__dirname, '.webpack_cache'),
version: '1.0'
}
};需要留意的是，缓存虽然好用，但某些第三方插件如果内部状态不纯，可能会导致缓存命中后产物异常。遇到构建结果不符合预期时，可以先删除缓存目录验证是否是缓存导致的问题。另外，在 CI 环境中建议结合缓存的目录路径做制品缓存，这样流水线的二次构建也能享受加速效果。
模块联邦：让多个应用像宇宙星体一样互相牵引
如果说持久化缓存解决的是速度问题，那么模块联邦（Module Federation）解决的就是架构问题，这也是岩石宇宙这个比喻最贴切的地方：每个独立部署的应用就像宇宙中的一颗星体，既保持自己的运行轨道，又能通过引力互相共享资源。
模块联邦允许一个应用在运行时动态加载另一个应用暴露出来的模块，不需要打包进自己的 bundle。这对微前端架构来说是质的突破。宿主应用（Host）和远程应用（Remote）通过 ModuleFederationPlugin 声明依赖关系：
// 远程应用的 webpack 配置
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})
]
};
// 宿主应用中直接引用远程模块
import RemoteButton from 'remoteApp/Button';shared 配置是关键，它保证宿主和远程之间共享同一份依赖，避免 React 这类库被打包两次从而引发运行时错误。使用 singleton: true 可以强制只加载一个实例。实践中有两个常见的坑：一是远程应用的容器地址变更后没有同步更新宿主的 remotes 配置；二是公共依赖版本差异过大导致运行时报 hook 调用错误，建议在团队内统一依赖版本范围。
更彻底的 Tree Shaking 与产物优化
Webpack 5 在产物分析能力上也上了一个台阶。新增的嵌套 Tree Shaking 支持对模块内部导出做更细粒度的追踪，配合 "sideEffects": false 的包声明，可以剔除更多无用代码。同时，官方支持了顶层的 await、动态导入的 prefetch 与 preload 提示，资源加载策略更灵活。
此外，Webpack 5 移除了对旧版 Node.js 的支持，要求 Node 10.13 以上，并且把 polyfill 的自动注入取消了。很多从 Webpack 4 迁移过来的项目会发现控制台提示 process is not defined 或者 crypto 模块找不到，原因就在这里。解决办法有两种：一是手动安装对应的 polyfill 并在 entry 中引入，二是通过 resolve.fallback 显式声明：
module.exports = {
resolve: {
fallback: {
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
path: false // 明确不需要 polyfill 的模块直接置为 false
}
}
};从实测数据看，中等规模的项目升级到 Webpack 5 后，首次构建时间变化不大，但开启文件缓存后的二次构建时间普遍能缩短百分之七十以上，产物体积因为更精细的 Tree Shaking 通常也能减少百分之五到百分之十。综合来看，这套像岩石宇宙一样稳固自洽的新特性组合，确实值得投入迁移成本。升级时建议先清理废弃的 loader 与插件，逐个验证第三方依赖兼容性，最后再开启缓存与模块联邦，这样过程会更平稳。