更换缓存插件后，如何强制清除访客浏览器的旧JS缓存？

针对你更换缓存插件后旧JS文件残留缓存的问题，以下是几个实用的解决方法：

1. 给JS文件添加版本号/哈希后缀（最优方案） #

这是前端静态资源缓存更新的行业标准做法，WP Rocket默认支持该功能，也可以手动配置：

• WP Rocket自动配置：进入WP Rocket后台的「静态资源优化」板块，确保「添加版本号」选项处于开启状态。插件会自动给JS/CSS文件添加基于内容的哈希后缀（如script.7a2b9c.js），旧文件名与新文件名完全不同，浏览器会直接请求新文件，不会读取缓存。
• 手动代码配置：如果是自定义注册的JS文件，在wp_enqueue_script函数中加入动态版本号（比如用文件修改时间）：

  wp_enqueue_script(
      'custom-script',
      get_template_directory_uri() . '/js/custom.js',
      array(),
      filemtime(get_template_directory() . '/js/custom.js'), // 用文件修改时间当版本号
      true
  );
  

  每次修改JS文件后，版本号自动更新，浏览器会重新加载最新文件。

2. 针对旧JS文件设置强制过期的HTTP响应头 #

如果旧的JS文件还有用户在访问，可以通过.htaccess配置让浏览器强制验证或放弃缓存：

# 匹配旧的JS文件名（替换成实际的旧文件名规则）
<FilesMatch "wp-fastest-cache.*\.js$">
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Expires "Thu, 01 Jan 1970 00:00:00 GMT"
</FilesMatch>

这段规则会让浏览器访问匹配的旧JS文件时，直接向服务器验证最新版本，或彻底不缓存。

3. 内联脚本检测并触发刷新（极端场景备用） #

如果前两种方法无法覆盖所有情况，可以在页面头部添加一段内联JS，检测旧缓存的存在并触发一次性刷新：

// 假设旧JS文件会暴露特定全局变量，以此判断是否有旧缓存
if (typeof wpFastestCacheGlobal !== 'undefined') {
    // 仅触发一次刷新，避免循环
    if (!sessionStorage.getItem('cache-updated')) {
        sessionStorage.setItem('cache-updated', '1');
        window.location.reload(true); // 强制跳过缓存刷新页面
    }
}

注意：这个方法可能会影响部分用户的访问体验，仅在前两种方法无效时使用。

4. 确保WP Rocket全站缓存已完全刷新 #

进入WP Rocket后台，点击「清除缓存」→「清除所有缓存」，同时确认「清除旧缓存文件」选项已开启，避免插件留存旧的静态资源副本。

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