部署React应用至Vercel后，如何强制失效用户本地缓存？

一、调整Vercel缓存策略 #

• 配置vercel.json区分静态资源与入口文件的缓存规则：对带内容哈希的静态资源（JS/CSS/图片等）设置长期缓存，对index.html强制浏览器每次重新验证，避免入口文件被长期缓存。示例配置：

{
  "headers": [
    {
      "source": "/(.*\\.(js|css|png|jpg|jpeg|gif|svg|ico))",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    }
  ]
}

• 确认React构建的静态资源带哈希后缀：React默认打包会为静态资源添加内容哈希（如main.abc123.js），新版本资源文件名变化后，浏览器会自动请求新文件，不会复用旧缓存。

二、前端主动检测更新 #

• 添加版本校验逻辑：在public目录新建version.json，每次部署更新版本号（如{"version": "1.0.2"}）。在App组件中请求该文件，对比本地存储的版本号，不一致时触发刷新提示：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    fetch('/version.json')
      .then(res => res.json())
      .then(data => {
        const storedVersion = localStorage.getItem('appVersion');
        if (storedVersion !== data.version) {
          if (confirm('发现新版本，刷新即可获取最新内容')) {
            localStorage.setItem('appVersion', data.version);
            window.location.reload(true);
          }
        } else if (!storedVersion) {
          localStorage.setItem('appVersion', data.version);
        }
      })
      .catch(err => console.error('版本检测失败:', err));
  }, []);

  return <div>你的应用内容</div>;
}

export default App;

• 该方案可主动触达用户，避免用户长期停留在旧版本。

三、临时应急处理 #

• 针对已缓存旧入口文件的用户，可在Vercel部署设置中为本次部署添加自定义HTTP头，强制index.html重新验证；或发布带版本号变更的小更新，结合上述版本检测逻辑触发用户刷新。

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