如何在Create React App中实现Cache Busting缓存清除？

嘿，我完全懂你遇到的这个头疼问题——更新了React项目，跑了npm run build把新文件传到服务器，结果用户打开还是旧页面，简直让人挠头对吧？其实Create React App本身已经内置了缓存清除的机制，但有时候可能因为服务器配置或者特殊需求需要额外处理，我给你整理几种靠谱的解决方法：

1. 利用CRA默认的哈希命名机制（最推荐） #

Create React App在执行npm run build时，已经自动为打包后的静态资源（JS、CSS、图片等）生成了带唯一哈希值的文件名，比如main.abc123.js、styles.def456.css。这种方式本质上就是最有效的缓存清除手段——因为文件名变了，浏览器会认为是全新的资源，自然会请求新文件，不会复用旧缓存。

不过这里有个关键前提：服务器配置要正确。你需要给带哈希的静态资源设置长期缓存（比如Cache-Control: max-age=31536000），而入口文件index.html必须设置成不缓存或者短缓存，这样浏览器每次都会拉取最新的index.html，从而加载到新的哈希资源。

举个Nginx配置的例子：

# 给index.html设置不缓存
location = /index.html {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  expires 0;
}

# 给带哈希的静态资源设置长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  expires 1y;
}

2. 手动添加查询参数（满足特殊需求） #

如果你确实想实现类似非React项目中styles.css?abcde这种带参数的方式，那需要修改CRA的webpack配置。由于CRA默认不让直接修改配置，我们可以用react-app-rewired来实现（不推荐用eject，因为不可逆）：

• 首先安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录创建config-overrides.js文件，添加以下配置来给资源URL加上哈希参数：

  const { override, adjustWebpackConfig } = require('customize-cra');
  
  module.exports = override(
    adjustWebpackConfig(webpackConfig => {
      // 修改JS文件的输出命名，添加?v=[contenthash]参数
      webpackConfig.output.filename = 'static/js/[name].[contenthash].js?v=[contenthash]';
      webpackConfig.output.chunkFilename = 'static/js/[name].[contenthash].chunk.js?v=[contenthash]';
      
      // 修改CSS文件的输出命名，同样添加参数
      const miniCssPlugin = webpackConfig.plugins.find(plugin => plugin.constructor.name === 'MiniCssExtractPlugin');
      if (miniCssPlugin) {
        miniCssPlugin.options.filename = 'static/css/[name].[contenthash].css?v=[contenthash]';
        miniCssPlugin.options.chunkFilename = 'static/css/[name].[contenthash].chunk.css?v=[contenthash]';
      }
      
      return webpackConfig;
    })
  );
  

• 最后修改package.json里的脚本命令，替换成react-app-rewired执行：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

这样执行npm run build后，生成的资源链接就会带上?v=哈希值的参数了。

3. 临时解决用户的旧缓存问题 #

如果已经有用户看到了旧页面，你可以告诉他们用强制刷新的方式获取最新内容：Windows/Linux按Ctrl + Shift + R，Mac按Cmd + Shift + R——这个操作会绕过浏览器缓存，直接从服务器拉取所有最新资源。不过这只是临时方案，还是得从构建和服务器配置上彻底解决问题。

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