React Vite客户端缓存清理求助：AWS Amplify部署后更新不生效

以下是几种无需用户手动清理缓存的可行解决方案：

1. 配置Amplify控制台的缓存规则 #

进入Amplify控制台找到你的应用：

• 左侧导航栏选择「App settings」→「Rewrites and redirects」
• 切换到「Cache settings」标签，点击「Edit」添加规则：
  • 针对/*.js、/*.css、/*.png等静态资源：设置Cache-Control为public, max-age=31536000, immutable。这类资源在React构建时会自动带上哈希后缀，更新后文件名变化，长期缓存不会影响内容更新。
  • 针对/index.html：设置Cache-Control为no-cache, no-store, must-revalidate，强制浏览器每次请求都验证文件是否最新。

2. 确保React构建生成哈希文件名 #

Create React App（CRA）默认会在构建时为JS、CSS等静态资源添加内容哈希后缀（如main.abc123.js）。如果是自定义Webpack配置，需确保output字段设置了[contenthash]或[chunkhash]，保证资源更新后文件名唯一，避免浏览器缓存旧文件。

3. 通过amplify.yml配置缓存头部 #

在项目根目录创建或修改amplify.yml，直接在构建配置中定义缓存规则，示例如下：

version: 1
frontend:
  phases:
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  headers:
    - pattern: '*.html'
      headers:
        - key: Cache-Control
          value: 'no-cache, no-store, must-revalidate'
    - pattern: '*.js'
      headers:
        - key: Cache-Control
          value: 'public, max-age=31536000, immutable'
    - pattern: '*.css'
      headers:
        - key: Cache-Control
          value: 'public, max-age=31536000, immutable'
    - pattern: '*.{png,jpg,jpeg,gif,svg}'
      headers:
        - key: Cache-Control
          value: 'public, max-age=31536000, immutable'

提交该文件到Git仓库，Amplify构建时会自动应用这些缓存规则。

4. 应用内版本检测与自动刷新（可选） #

在React应用中添加版本校验逻辑，自动检测更新并刷新页面：

1. 构建时生成version.json文件（可使用Git commit hash或版本号作为标识），放在public目录下：

   {
     "version": "abc123def"
   }
   

2. 在应用入口文件（如src/index.js）中添加检测逻辑：

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

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