webpack开启filesystem缓存后第三次构建长时间卡住是什么原因？

问题根因 #

你遇到的构建卡住问题是webpack 5文件系统缓存的进程锁等待超时导致的，完全匹配你提供的所有现象特征：

• 日志显示webpack核心编译环节仅耗时3.5s，额外耗时全部发生在编译完成到进程退出的阶段
• 卡住期间CPU、IO占用均为0，进程处于休眠等待状态
• 卡住时长稳定在60s左右，和webpack默认的缓存锁等待超时时间完全吻合

webpack 5的filesystem类型缓存默认开启进程锁机制，目的是避免多进程同时修改缓存文件导致缓存损坏。如果前一次构建因为插件冲突、进程强制中断等原因，缓存目录下的.lock文件没有被正常删除，后续构建启动时会检测到已存在的锁文件，直接进入无输出的等待状态，直到60s超时后才会强制获取锁继续执行。

解决方案 #

你可以根据使用场景选择以下任意一种方案修复：

• 单进程本地构建场景：直接在缓存配置中关闭锁机制，不会有缓存冲突风险

  cache: {
    type: 'filesystem',
    compression: false,
    profile: false,
    lock: false, // 关闭缓存锁
  },
  

• 多进程构建场景：调整锁等待超时时间，比如降低到3s避免长时间卡住

  cache: {
    type: 'filesystem',
    compression: false,
    profile: false,
    lock: {
      wait: 3000, // 锁等待超时时间设为3s
    },
  },
  

• 通用修复方案：将webpack升级到5.70.0及以上版本，该版本优化了缓存锁的自动释放逻辑，修复了绝大多数锁残留的已知bug
• 临时验证方案：每次构建前手动删除默认缓存目录node_modules/.cache/webpack下的.lock文件，确认卡住问题是否消失

验证方法 #

你可以将配置中的cache.profile设为true，开启缓存操作的详细日志，构建时会输出锁等待的相关记录，可直接确认问题是否由缓存锁导致。

内容的提问来源于stack exchange，提问作者xakepp35