ReactJS构建后CSS文件未更新，如何禁用缓存？

1. 确保React构建生成带哈希的文件名 #

Create React App（CRA）默认执行npm run build时，会为CSS、JS等静态资源文件名添加内容哈希后缀（比如main.abc123.css），内容更新后文件名自动变化，浏览器会请求新资源。如果你的构建输出没有哈希后缀，检查是否修改过CRA默认配置。

若使用自定义webpack配置，需在output中配置哈希规则：

// webpack.config.js
module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
    assetModuleFilename: '[name].[hash][ext][query]'
  }
};

2. 配置Nginx优化缓存策略 #

修改Nginx站点配置文件（如/etc/nginx/conf.d/your-site.conf），针对静态资源设置差异化缓存规则：

server {
  # 其他站点配置...
  
  # 带哈希的静态资源可设置长期缓存，文件名变则缓存失效
  location /static/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 入口文件index.html必须禁用缓存，确保每次加载最新资源引用
  location = /index.html {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
  }
}

3. 临时清除浏览器缓存 #

按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，强制浏览器重新请求所有资源，可临时解决旧缓存问题。

4. 确认构建文件完全覆盖 #

执行npm run build后，确保将生成的build目录完整覆盖Nginx服务器上的旧部署文件，避免因部分文件未替换导致资源引用不一致。

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