当我更新我的网站时，运行 npm run build 并将新文件上传到服务器，我仍在查看我网站的旧版本。
如果没有 React，我可以看到我的网站的新版本具有缓存清除功能。我这样做：
上一个文件
<link rel="stylesheet" href="/css/styles.css">
新建文件
<link rel="stylesheet" href="/css/styles.css?abcde">
我该如何做这样的事情或通过 create react app 实现缓存清除？
在 GitHub 中有很多关于此问题的 create react app 主题，但没有人给出正确/简单的答案。
【问题讨论】：
标签： reactjs caching react-redux create-react-app
正如这里之前的一些答案所提到的，在查看旧版本的 React 应用程序时，Service Worker 和（缺少）缓存标头都可能对你不利。
关于 caching，React 文档声明如下：
将
Cache-Control: max-age=31536000用于您的build/static资产，Cache-Control: no-cache其他一切都是安全的 和有效的起点，确保您的用户的浏览器将 始终检查更新的index.html文件，并将缓存所有build/static文件保存一年。请注意，您可以使用build/static安全年到期，因为文件内容 哈希嵌入到文件名中。
正如@squarism 所提到的，旧版本的 create-react-app 默认为 opt-out 服务工作者注册，而新版本是 opt-in。您可以在official docs 中阅读更多相关信息。如果您从旧版本的 create-react-app 开始并且想要切换到新的行为，那么将您的配置与最新的 template 匹配是一个非常简单的过程。
相关问题：
【讨论】：
index.html 对象上配置 Cache-Control: max-age=0。
编辑：create-react-app v2 现在默认禁用服务工作者
此答案仅适用于 CRA v1
这可能是因为你的网络工作者。
如果您查看 index.js 文件，您会看到
registerServiceWorker();
从来没有想过它做了什么？如果我们看一下它从中导入的文件，我们可以看到
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.
如果您想删除网络工作者，请不要只删除该行。导入 unregister 并在您的文件中调用它而不是 register。
import { unregister } from './registerServiceWorker';
然后调用
unregister()
附：注销时，至少需要刷新一次才能使其正常工作
【讨论】：
如果您的问题是在 index.html 中静态引用的资源，例如 .css 文件或其他 .js 文件（例如配置文件），您可以声明一个 React 环境变量，为其分配唯一值并在你的 index.html 文件。
在您的构建脚本 (bash) 中：
REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build
在你的 index.html 中：
<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />
变量名必须以 REACT_APP_ 开头。更多关于 React 中的环境变量：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables。
【讨论】：
对于服务人员，他们似乎从选择退出变为选择加入。这是更改自述文件的提交，其中包含类似于 Kerry G 的答案的示例：
【讨论】：
当我使用create-react-app（并部署到heroku）时，我遇到了同样的问题。它一直显示我的应用程序的旧版本?。
我发现问题似乎出在浏览器端，它缓存了我的旧 index.html 及其过时的 js 包
您可能希望将以下内容添加到服务器端响应标头中
"Cache-Control": "no-store, no-cache"
或者如果您也在使用 heroku create-react-app-buildpack，请更新 static.json 文件
"headers": {
"/**": {
"Cache-Control": "no-store, no-cache"
}
}
我觉得这样你还是可以留住那个可怜的 service worker ?，最新的内容会在 N+1 加载时显示（第二次刷新）
希望这会有所帮助...
【讨论】：