Webpack 5 在官方路线图中把改进方向归纳为几个关键词，其中 Magnitude（量级）指向的是一件事：让 Webpack 在超大项目规模下依然保持可用的构建速度和可控的产物体积。过去Webpack 4 在几千个模块的项目中冷启动往往要一两分钟，热更新也会随着项目膨胀越来越慢。Webpack 5 通过持久化缓存、模块联邦、资源模块、更激进的 Tree Shaking 等一揽子改动，把量级问题拆开来逐个击破。这篇文章就来逐项分析这些能力背后的原理和使用方式。
持久化缓存：二次构建从分钟级降到秒级
持久化缓存是 Webpack 5 里对量级提升最直接的一个特性。它的思路很简单：把第一次编译过程中产生的模块解析结果、依赖图信息序列化后写到磁盘上，下次启动时直接读取这些快照，跳过 resolve、parse 和大部分 transform 工作。对于有上万个模块的 monorepo 项目，二次构建提速经常能达到百分之七十以上，某些极端场景接近全量跳过编译。
开启方式只需要在配置里加几行：
module.exports = {
cache: {
type: 'filesystem',
buildDependencies: {
// 配置文件本身变化时让缓存失效
config: [__filename]
},
cacheDirectory: path.resolve(__dirname, '.webpack_cache'),
version: '1.0'
}
};有几个细节值得注意。buildDependencies 用来声明哪些文件会影响构建结果，把这些文件加入依赖清单后，一旦 webpack.config.js 或者 babel 配置变了，缓存会自动失效，避免出现旧产物污染新构建的问题。另外，如果项目里用了 babel-loader、eslint-loader 这类自带缓存的工具，建议同时清理它们的缓存目录，否则排查问题时容易互相干扰。
缓存失效策略基于文件的时间戳和内容哈希，Webpack 内部会对每个模块维护快照信息。这也意味着在 CI 环境里，如果你的流水线每次都是全新容器，可以把 .webpack_cache 目录通过制品方式缓存下来，下一次流水线直接复用，整体构建时间能明显下降。
模块联邦：多应用共享代码的量级解法
当项目规模大到需要拆成多个独立部署的前端应用时，代码共享就成了量级问题。传统做法要么发 npm 包统一升级，要么用 externals 加 CDN 脚本，前者迭代慢，后者缺乏类型和依赖管理。Webpack 5 引入的 Module Federation 允许一个应用在运行时动态加载另一个应用暴露的模块，宿主和远程方各自独立构建、独立部署，共用一份运行时代码。
下面是一个最小可用的示例，宿主应用配置：
// webpack.config.js（宿主）
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
// 远程应用地址，运行时按需加载
remoteApp: 'remoteApp@http://cdn.ipipp.com/remote/remoteEntry.js'
},
shared: {
react: { singleton: true },
'react-dom': { singleton: true }
}
})
]
};远程应用只需要声明 exposes，把某个组件暴露出去：
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button'
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
})宿主代码里就可以直接 import Button from 'remoteApp/Button'，Webpack 会在运行时拉取远程模块。shared 配置配合 singleton: true 可以保证 react 这类有全局单例要求的库只加载一份，避免出现多个 React 实例导致的报错。这套机制在微前端场景下几乎是标配方案，它把代码共享从构建期推迟到了运行期，天然适合多团队并行开发的超大规模项目。
资源模块与 Tree Shaking：从源头压产物体积
量级优化不只是构建速度，产物体积同样关键。Webpack 5 内置了 asset modules，用 asset/resource、asset/inline、asset/source 和 asset 四种类型取代了原来的 file-loader、url-loader、raw-loader 组合，减少了一层 loader 的开销，配置也更直观：
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于 8kb 内联为 base64，否则输出独立文件
maxSize: 8 * 1024
}
}
}
]
}
};Tree Shaking 方面，Webpack 5 能够分析嵌套的导出关系，对 export * from 这种重导出场景做更彻底的摇树优化，还支持了 CommonJS 的部分分析逻辑以及顶层 await。对于使用了 class 成员方法的部分场景，只要通过 sideEffects 字段在 package.json 中正确声明副作用，未被引用的成员也能被安全移除。这些改动叠加起来，大型依赖库打包后的体积普遍能减少百分之十到百分之三十。
升级时要注意，Webpack 5 要求 Node.js 版本不低于 10.13，且废弃了一批旧配置：node.buffer 等 polyfill 选项被移除，一些依赖浏览器端 polyfill 的包需要手动引入 process、buffer 的替代品。建议先用官方提供的升级指引跑一遍构建，配合 stats 分析产物，逐项确认没有回归后再全量切换。把这些量级层面的能力用足之后，大型项目的构建体验会和 Webpack 4 时代完全是两个档次。