React应用构建部署后如何清除浏览器缓存？

一、先解决配置后页面空白问题 #

导致配置后无内容渲染的常见原因及修复方式：

• 检查静态资源路径配置：如果应用部署在域名子路径而非根目录，需要在package.json中配置正确的homepage字段，同时所有静态资源（包括版本校验用到的配置文件）的请求路径要匹配子路径前缀，不能写死为根路径
• 检查版本校验逻辑的执行时机：禁止在应用根组件挂载完成前触发页面刷新操作，否则会出现死循环刷新导致白屏，所有校验逻辑需放在useEffect回调中执行
• 检查构建产物是否正常：执行npm run build后查看build目录下的index.html是否正确引用了所有js、css资源，避免构建过程报错导致产物缺失

二、正确的部署后自动清理浏览器缓存方案 #

无需引入第三方库，按以下步骤配置即可生效：

1. 基础缓存策略配置（核心） #

• 保留构建工具的静态资源hash特性：React官方脚手架CRA默认会在生产构建时为js、css等资源添加基于文件内容的hash后缀（格式如main.8a3d2f9b.js），不要修改webpack配置关闭该特性，内容变更后hash会自动更新，浏览器会自动请求新资源
• 配置服务器对入口文件的不缓存规则：给index.html设置以下响应头，确保用户每次访问都会拉取最新的入口文件，不会缓存旧版本

Cache-Control: no-cache, no-store, must-revalidate
Expires: 0
Pragma: no-cache

2. 主动触发更新（可选，适用于用户长时间不关闭页面的场景） #

如果需要在用户页面驻留期间有新版本时主动更新，可添加版本校验逻辑：

1. 新增构建自动生成版本号的逻辑，修改package.json中的build命令：
   "build": "node -e \"require('fs').writeFileSync('./public/version.json', JSON.stringify({version: Date.now()}))\" && react-scripts build"
   每次构建会自动在public目录生成带时间戳版本号的version.json文件

2. 在应用根组件添加版本校验逻辑：

import { useEffect } from 'react'
function App() {
  useEffect(() => {
    const checkAppVersion = async () => {
      try {
        // 加时间戳避免请求缓存的version.json
        const res = await fetch(`/version.json?t=${Date.now()}`)
        const latestVersion = (await res.json()).version
        const localVersion = localStorage.getItem('app_version')
        // 版本不一致时触发刷新
        if (localVersion && latestVersion !== localVersion) {
          localStorage.setItem('app_version', latestVersion)
          window.location.reload()
        } else if (!localVersion) {
          localStorage.setItem('app_version', latestVersion)
        }
      } catch (err) {
        console.error('版本校验异常', err)
      }
    }
    checkAppVersion()
    // 可按需添加定时器，定时校验新版本
    // const timer = setInterval(checkAppVersion, 10 * 60 * 1000)
    // return () => clearInterval(timer)
  }, [])
  // 其余应用逻辑
  return <div>/* 应用内容 */</div>
}
export default App

3. 服务器给version.json配置和index.html一致的不缓存规则即可。

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