关于reactjs：使用CRA React进行缓存清除

Cache busting with CRA React

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

没有React，我可以看到带有缓存清除功能的网站的新版本。我这样做：

上一个文件

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

新文件

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

我该怎么做或通过create react app实现缓存清除？

在GitHub上有很多关于此问题的create react app线程，但是没有人给出正确/简单的答案。

编辑：create-react-app v2现在默认情况下禁用了服务工作者

此答案仅适用于CRA v1

这可能是由于您的网络工作者。

如果您查看index.js文件，您会看到

1	registerServiceWorker();

从来没有想过它做了什么？如果我们查看从中导入的文件，我们可以看到

1
2
3
4
5
6
7
8
9

// 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.

如果要删除网络工作者，请不要仅删除该行。导入注销并在文件而不是注册中调用它。

1	import { unregister } from './registerServiceWorker';

，然后致电

1	unregister()

P.S。取消注册后，至少需要刷新一次才能使其生效

相关讨论

"至少需要刷新才能使它正常工作"，您的意思是第二次刷新后用户将能够看到新内容吗？
@ Alfrex92是的，应该。
有其他解决方案吗？用户只需要刷新一次。
无法正常工作，并且出现此错误" service-worker.js：1未捕获(已承诺)错误：在service-worker上请求serverlessapps.info/static/js/main.496224d6.js返回状态为403的响应。 js：1"我在Github中更新了源代码。
@ Alfrex92您尚未从索引中删除registerServiceWorker()行，需要将其删除，如果不清楚，请抱歉。
此解决方案是否可取？如果您想让服务人员继续缓存，除非您提交了更新的代码，该怎么办？
@Dan然后，您需要为服务人员配置版本控制，并在版本增加时删除旧的缓存...但是，感谢Kerry Gougeaon的快速临时解决方法。
我可以只删除registerServiceWorker();行和registerServiceWorker.js文件吗？
@AhmadMaleki是的，如果您的项目尚未部署，但是如果您的网站已经在线并且有人让服务人员在工作，那么这是一个很好的解决方案。只需删除这些行就不会取消注册。
如何导入isLocalhost，registerServiceWorker和注销，然后执行if语句检查是否为localhost，registerServiceWorker否则注销
@ crstamps2如果您搜索它们，可能会有更好的答案。我正在编码时关闭/注销sw。然后，当我完成编码后，我重新打开/注册sw。使用Activate事件删除旧版本缓存。然后将此代码段添加到您的sw.js中，其中CACHE_VERSION是您在完成编码后手动更新的字符串(即CACHE_VERSION =" 1.0.1")：
@ crstamps2 self.addEventListener(activate, function (event) { delete all entries from earlier cache event.waitUntil( caches.keys() .then(function (keys) { return Promise.all(keys.filter(function (key) { return key !== CACHE_VERSION; }).map(function (key) { return caches.delete(key); }) ); }) ); });
如果您想自行管理缓存突发，请查看本文-dev.to/flexdinesh/cache-busting-a-react-app-22lk
@KerryGougeon这怎么办。 // unregister()到下面的register()。请注意，这带有一些PITFALLS。

当我使用create-react-app并部署到heroku时遇到相同的问题。它一直显示我的应用程序的旧版本??。

我发现问题似乎出在浏览器端，它用过时的js包缓存了我的旧index.html

您可能希望将以下内容添加到服务器端响应标头

1	"Cache-Control":"no-store, no-cache"

，或者如果您还使用heroku create-react-app-buildpack，请更新static.json文件

1
2
3
4
5

"headers": {
"/**": {
"Cache-Control":"no-store, no-cache"
}
}

我认为通过这种方式您仍然可以保留可怜的服务人员??，并且最新内容将显示在N 1负载(第二次刷新)上

希望这对您有帮助...

相关讨论

正如在此之前的一些回答所提到的那样，当涉及到看到旧版本的React应用时，服务工作者和缓存头(缺乏)都可能对您不利。

React文档在缓存时声明以下内容：

Using Cache-Control: max-age=31536000 for your build/static
assets, and Cache-Control: no-cache for everything else is a safe
and effective starting point that ensures your user's browser will
always check for an updated index.html file, and will cache all of
the build/static files for one year. Note that you can use the one
year expiration on build/static safely because the file contents
hash is embedded into the filename.

如@squarism所述，较早版本的create-react-app默认选择退出服务工作者注册，而较新版本则选择加入。您可以在官方文档中阅读有关此内容的更多信息。如果您从旧版本的create-react-app开始并且想要切换到新的行为，这是一个很简单的过程，可以将您的配置与最新模板进行匹配。

相关讨论

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

在您的构建脚本(bash)中：

1	REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build

在您的index.html中：

1	<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的答案：

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad