如何定位Webpack 5增量构建缓慢（大体积bundle）的问题原因？

云上老周

2026-10-5

问题根因

你当前遇到的增量构建耗时高、主bundle无变更仍被重写的核心原因如下：

输出文件名使用了全局构建哈希：你配置中filename和chunkFilename使用的${hashVal}是全局一次性生成的变量，每次启动构建都会生成新的hash值，导致所有输出文件的文件名每次构建都会变更，哪怕文件内容完全一致，webpack也会在output阶段强制重写所有关联文件，37MB的主入口文件每次重写会占用大量IO耗时。
未正确配置webpack5持久化缓存：webpack5内置的磁盘级持久化缓存未开启，导致增量构建时无法复用之前的模块、chunk处理结果，每次都要重新生成所有输出内容。
chunk ID配置不合理：你使用[id]作为chunk文件名的标识，默认构建下id会随构建顺序变化漂移，哪怕chunk内容不变也可能触发重写。

解决方案

1. 替换全局哈希为文件内容哈希

将output配置中的自定义全局hash替换为webpack原生的[contenthash]，该哈希仅对应单个文件的内容，文件内容不变则哈希不变，webpack会自动跳过无变更文件的重写：

output: {
  path: __dirname,
  filename: `static/js/[name]/bundle.[contenthash].js`,
  chunkFilename: `static/js/[name]/chunks/[contenthash].js`,
  publicPath: "/",
}

2. 开启webpack5持久化缓存

在webpack配置根层级添加缓存配置，将构建结果缓存到本地磁盘，增量构建时直接复用缓存结果：

cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename] // 仅当webpack配置文件变更时才使缓存失效
  }
}

3. 固定chunk ID避免漂移

在optimization配置中添加chunkIds配置，根据chunk内容生成固定ID，避免ID变更导致的不必要重写：

optimization: {
  chunkIds: 'deterministic',
  splitChunks: {
    chunks: "async",
  },
  minimizer: ["...", new CssMinimizerPlugin()],
}

4. 优化主入口体积

37MB的主入口文件即使是正常重写也会占用较高IO耗时，建议调整splitChunks的cacheGroups规则，将主入口中引入的第三方依赖、公共工具代码抽离到独立的vendors chunk中，降低主入口体积。

问题排查方法

如果调整后仍存在问题，可以在启动webpack时添加--progress --profile参数，查看output阶段具体耗时的子步骤，也可以开启webpack调试日志定位触发bundle重写的具体原因。

内容的提问来源于stack exchange，提问作者edA-qa mort-ora-y