Reactjs 使用CRA React进行缓存破坏

当我更新我的站点时，运行npm run build并将新文件上传到服务器，我仍然在查看我站点的旧版本

如果没有React，我可以看到缓存破坏的新版本。我这样做：

上一个文件

<link rel="stylesheet" href="/css/styles.css">

新文件

<link rel="stylesheet" href="/css/styles.css?abcde">

我如何做类似的事情，或者使用CreateReact应用程序实现缓存破坏

---

createreact应用程序的GitHub中有很多关于这一点的帖子，但没有人给出正确/简单的答案

EDIT: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.

如果要删除web worker，不要只删除该行。导入unregister并在文件中调用它，而不是在寄存器中调用它

import { unregister } from './registerServiceWorker';

然后打电话

unregister()

---

注意：当您注销时，至少需要一次刷新才能使其正常工作

我在使用

创建react app

（并部署到heroku）时遇到了相同的问题。它不断显示我的应用程序的旧版本似乎他们在服务人员方面从选择退出变为选择加入。以下是改变自述文件的提交，其示例与Kerry G的答案类似：

---

如果您的问题是index.html中静态引用的资源，例如.css文件或其他.js文件（例如配置文件），则可以声明React环境变量，为其指定唯一值，并在index.html文件中引用它

在构建脚本（bash）中：

在index.html中：

<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />

---

变量名必须以REACT\u APP\开头。关于React中的环境变量的更多信息：。

正如前面的一些答案所提到的，在查看React应用程序的旧版本时，服务工作者和（缺少）缓存头都可能与您合谋

当涉及到时，React文档说明如下：

为您的

构建/静态

资产和
缓存控制：没有缓存
对于其他所有内容都是安全的
有效的起点，确保用户的浏览器
始终检查更新的
index.html
文件，并将缓存所有文件
build/static
文件保存一年。请注意，您可以使用
由于文件内容
散列被嵌入到文件名中

正如@squarism所提到的，较旧版本的create-react-app默认为服务人员注册的选择退出，而较新版本为选择加入。你可以阅读更多关于这方面的文章。如果您从较旧版本的create react app开始，并希望切换到新的行为，那么将配置与最新配置匹配是一个非常简单的过程

相关问题：





“至少需要一次刷新才能正常工作”您的意思是，在第二次刷新后，用户将能够看到新内容？@Alfrex92是的，应该可以。是否有其他解决方案？用户只需刷新一次。@Dan然后，您需要为服务人员配置版本控制，并在升级版本时删除旧缓存。。。但是感谢Kerry Gougeon提供的快速临时解决方案。@AhmadMaleki是的，如果您的项目没有部署，这是一个很好的解决方案，但是如果您的网站已经在线，并且有人让服务人员工作；仅仅删除这些行并不能注销它。你真的希望所有内容都没有缓存吗？只是html文件才是罪魁祸首，对吧？也许这一个更好，谢谢你在这里做得如此透彻，这是我的方案的最佳答案。如果其他任何人试图确保Cloudfront始终提供来自S3的最新应用程序，那么答案似乎是在网站bucket中的
index.html
对象上配置
Cache Control:max age=0
。@bszom如何设置Cache Control:no Cache for build/static vs index.html。此meta标记上是否有属性？@a.com缓存控件是HTTP响应头，与meta标记无关。您如何配置这取决于您如何服务/托管您的应用程序。我们的javascript代码和HTML代码如何，因为每当我上传新代码时，它们都不会被添加。很抱歉回复太晚。我认为javascript的情况取决于您的构建过程。我们使用createreact应用程序（package.json->scripts->build条目是“react scripts build”）。构建过程生成javascript文件，文件名包括文件内容的散列。所以一般来说，我认为js文件不需要额外的缓存破坏。如果正在缓存索引html文件，则问题可能出在web服务器的缓存控制中。感谢Michal的回复。Michal，你能帮助我如何处理web服务器的缓存控制吗？因为我的react应用程序位于不同的服务器上，而Express.js（Node.js）服务器位于不同的服务器上。如果我正确理解你的设置，你的问题可能出在react应用程序web服务器上。缓存通常通过添加一组响应头来控制，这些响应头告诉浏览器和代理服务器如何缓存此网站。有关详细信息，请参见此：。感谢您的详细回复。基本上，每当我在部署最新代码后访问我的react应用程序时，我都会看到我以前部署的react生成代码，直到我手动清除浏览器的缓存。这是我的主要问题。
<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />