部署在Firebase上的React应用：新部署内容不显示（浏览器缓存旧版本）

我之前也遇到过一模一样的情况，确实挺头疼的，下面几个方法亲测有效，能帮你确保用户看到最新版本：

1. 配置Firebase Hosting缓存规则（核心解决方法） #

CRA本身已经为静态资源（JS/CSS/图片）做了哈希命名处理（比如main.abc123.js），这类文件可以安全长期缓存，但问题通常出在index.html被浏览器缓存。你可以通过修改firebase.json的响应头配置来解决：

• 打开项目根目录的firebase.json，添加headers配置项：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      // 强制index.html不缓存，每次都从服务器拉取
      {
        "source": "/",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "**/*.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      // 哈希后的静态资源允许长期缓存，不影响性能
      {
        "source": "**/*.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.css",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.{png,jpg,jpeg,gif,webp,svg}",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

配置完成后重新执行npm run build && firebase deploy，这样index.html会强制浏览器每次请求最新版本，而静态资源则可以高效缓存。

2. 添加主动版本检测逻辑（可选增强） #

如果想主动提示用户刷新获取新版本，可以在应用里加入简单的版本对比逻辑：

• 在public/index.html中添加一个存储版本号的meta标签：

<meta name="app-version" content="%REACT_APP_VERSION%">

• 在项目根目录的.env文件里设置版本号（每次部署前更新）：

REACT_APP_VERSION=1.0.2

• 在App组件中添加检测逻辑：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const currentVersion = document.querySelector('meta[name="app-version"]').content;
    const savedVersion = localStorage.getItem('app-version');

    if (savedVersion && savedVersion !== currentVersion) {
      if (window.confirm('发现新版本，是否刷新页面获取最新内容？')) {
        localStorage.setItem('app-version', currentVersion);
        window.location.reload(true);
      }
    } else {
      localStorage.setItem('app-version', currentVersion);
    }
  }, []);

  // 你的组件内容...
}

export default App;

这个方法能主动通知用户更新，避免用户无意识停留在旧版本。

3. 部署后强制清除Firebase服务器缓存 #

每次部署完成后，你可以通过两种方式清空Firebase端的缓存：

• 使用Firebase CLI命令：

firebase deploy --only hosting -m "Deploy new version with cache clear"

• 或者在Firebase控制台的Hosting页面，点击右上角的「更多」按钮，选择「清除缓存」。

这些方法组合起来基本能解决绝大多数缓存问题，我现在部署项目都会用第一和第三个方法，用户基本不会再遇到旧版本的问题了。

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