ExtJS 6.6.0应用缓存问题：重装XAMPP后代码修改不生效如何解决？

ExtJS 6.6.0 缓存相关配置排查 #

• 检查app.json全局配置
  确认cacheBuster字段设为true，开启后每次构建会自动给所有静态资源加唯一查询戳，绕过缓存；同时检查loader配置块的cache参数，开发环境需设为false，示例配置：

  {
    "cacheBuster": true,
    "loader": {
      "cache": false
    }
  }
  

  也可以在入口代码里手动加Loader配置：

  Ext.Loader.setConfig({ cache: false });
  

• 清理Sencha Cmd构建缓存
  删除项目根目录下的build文件夹，重新执行构建命令：
  • 开发模式：sencha app watch
  • 生产模式：sencha app build production
    确认新生成的构建产物时间戳为最新，且已正确部署到XAMPP的web根目录对应路径，避免新旧目录混淆。
• 禁用微加载器缓存
  ExtJS自带的微加载器会默认缓存bootstrap.js和app.json内容，可在入口HTML的引入标签上加动态参数强制拉新：

  <script src="bootstrap.js?_dc=20240520001"></script>
  

  参数值每次修改代码后换为新的时间戳即可。

服务端额外排查项 #

• 检查Apache静态资源缓存规则
  你配置的PHP缓存头仅对走PHP解析的请求生效，ExtJS的js/css/json等静态资源默认由Apache直接返回，需检查Apache的mod_expires、mod_headers模块是否开启了全局缓存规则，可在站点根目录新增.htaccess文件强制禁用静态资源缓存：

  <FilesMatch "\.(js|css|html|json)$">
    Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
    Header set Pragma "no-cache"
    Header set Expires "Thu, 01 Jan 1970 00:00:00 GMT"
  </FilesMatch>
  

• 排查服务端隐性缓存
  确认XAMPP是否安装了varnish、redis等缓存中间件，或是否开启了文件系统级的缓存，导致读取的是旧的磁盘文件内容。

快速定位方法 #

直接在服务器上找到ExtJS的入口js文件，手动添加一行console.log('测试新代码')，然后在浏览器地址栏直接访问该js文件的完整URL，查看返回内容是否包含新增的测试代码：

• 若不包含：说明服务端返回的就是旧文件，和ExtJS配置无关，优先排查文件部署路径、服务端缓存规则
• 若包含：说明是ExtJS加载逻辑的缓存问题，优先排查上述ExtJS专属配置项

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