Webpack缓存失效？一文搞定排查难题！

金虹桥程序员2024-03-05 20:21

背景

由于项目构建比较耗时，因此想到启用webpack持久化缓存来提升二次构建速度

webpack persistent cache设置

设置了缓存类型为 'filesystem'，并且指定当 webpack 配置文件发生变化时，缓存失效。这样，如果配置文件发生变化，Webpack 就会重新构建所有的模块，以确保构建结果的正确性

js 复制代码

module.exports = {  
  //...  
  cache: {  
    type: 'filesystem', // 缓存类型，默认是 'filesystem'  
    buildDependencies: {  
      config: [__filename], // 当 webpack 配置文件发生变化时，缓存失效  
    },  
  },  
  //...  
};

遇到的问题

底层是使用create-react-app的react-scripts，但是设置缓存后，一直无法生成缓存文件，同时缓存也未生效

缓存不生效的原因：compiler.run之后，没有执行compiler.close

create-react-app相关问题issues：

webpack相关说明：webpack.js.org/api/node/#r...

Don't forget to close the compiler, so that low-priority work (like persistent caching) have the opportunity to complete.

如何查看缓存是否生效：开启webpack构建logger功能（infrastructureLogging.debug = true; ）

webpack相关说明文档：webpack.js.org/configurati...

二次构建速度明显变快（整个来说），看到下面的日志，即可看到缓存开始生效。

[webpack.cache.PackFileCacheStrategy] starting to restore cache content

其它问题：

thread-loader跟webpack cache 兼容性问题，第2次以及后续构建时，构建快结束时，progress会block掉，初步推测是多线程和compiler之间协调有问题（暂未解决）
mini-css-extract-plugin跟缓存不兼容，可能是有css问题

相关问题issue:github.com/webpack/web...

解决方案

修改react-scripts的build文件，在里面添加类似的实现代码，因此需要修改node端require相关逻辑，使得require('react-scripts/scripts/build') 指向我们的期望的build文件，该build文件是react-scripts build文件的加强（魔改）版本

存在的风险

修改了 react-scripts的文件，后续升级的时候需要注意变更