Webpack缓存失效?一文搞定排查难题!

背景

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

webpack persistent cache设置

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

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

遇到的问题

底层是使用create-react-appreact-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的文件,后续升级的时候需要注意变更

相关推荐
软件技术NINI1 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front3 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04124 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj504 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中4 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web