能否无需用户清理缓存就更新已预加载到浏览器的CSS/JS/HTML等文件？

解决方案 #

• 资源指纹（版本号/哈希后缀）
  最通用的无感知更新缓存方案是给静态资源路径添加唯一的版本标识，浏览器会将不同标识的路径判定为独立资源，自动拉取最新版本，不会复用旧缓存。
  你可以直接手动添加版本查询参数，修改后的预加载代码如下：

  <link rel="preload" href="<?php echo $cur_url; ?>css/styles.css?v=2024052001" as="style" crossorigin="anonymous">
  

  每次更新CSS文件后修改v=后面的数值即可。如果需要自动生成版本号，可以用PHP读取文件修改时间实现：

  <?php
  $css_file = 'css/styles.css';
  // 自动读取文件最后修改时间戳作为版本号
  $version = filemtime($css_file);
  ?>
  <link rel="preload" href="<?php echo $cur_url . $css_file . '?v=' . $version; ?>" as="style" crossorigin="anonymous">
  <!-- 实际引用样式的link标签必须使用完全相同的路径，否则预加载的缓存无法正常复用 -->
  <link rel="stylesheet" href="<?php echo $cur_url . $css_file . '?v=' . $version; ?>" crossorigin="anonymous">
  

  如果你的项目使用前端构建工具（Webpack/Vite等），可以直接开启资源哈希命名功能，将哈希值直接嵌入文件名（例如styles.f8d3a2.css），兼容性比查询参数更好，可规避部分代理服务器忽略查询参数缓存资源的问题。
• 调整服务器缓存策略
  在服务端配置静态资源的缓存规则，避免浏览器长时间强制缓存资源，示例Nginx配置如下：

  location ~* \.(css|js|html|php)$ {
      # 缓存1小时，到期后自动向服务器校验资源是否更新
      expires 1h;
      add_header Cache-Control "public, must-revalidate";
      add_header ETag $etag;
  }
  

  配置后浏览器到期后会自动校验资源更新，无需用户手动清理缓存。
• 移动端Chrome缓存异常修复
  你遇到的移动端Chrome普通模式缓存异常，是因为Chrome对preload资源的缓存优先级更高，添加资源指纹后旧路径的缓存不会被命中，即可直接解决Bootstrap模态框样式异常的问题。如果仍有异常，可以在响应头中添加Vary: Accept避免跨请求缓存错乱。

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