apache React应用程序必须在新部署后清除浏览器缓存

pes8fvy9  于 2023-10-23  发布在  Apache
关注(0)|答案(6)|浏览(176)

我们正在使用Jenkins管道在Apache服务器上部署React应用程序。当我们部署新代码时,大多数新功能都可以正常工作,但并非所有更改都反映了浏览器中的最新更改。用户必须打开一个隐身窗口或清除缓存才能看到新功能。
我已经看到了一些与angular applications相关的解决方案,但任何具体的React应用程序,我没有看到任何地方。在构建过程中,我们可以添加一些东西,自动为最终用户提供最新的更改吗?我想,缓存破坏是必需的,但是我们怎么能不对代码进行大量修改呢,就像上面的解决方案对Angular应用程序所做的那样。

6ie5vjzr

6ie5vjzr1#

通常的方法是根据时间或内容向脚本和其他资产文件名添加一个散列。所以之前你有script.js,现在它将是script.[contenthash].js。每次更改脚本的内容时,内容哈希都会有所不同。
现在,当用户请求应用的index.html时,它将引用包含单个内容哈希的脚本。如果用户之前加载了script.abc123.js,现在index.html引用了script.cba321.js,浏览器将知道它以前没有看到过这个文件并加载它。这样,用户就可以获得脚本和其他资源(js、css、图片等)的当前版本。然而,要做到这一点,用户必须始终加载最新版本的index.html
这种方法不是针对特定React的,而是一种普遍的方法和最佳做法。然而,它是由create-react-app使用和建议的(参见:https://github.com/facebook/create-react-app)。
由于一直手动执行此操作非常繁琐,因此有很多脚本和策略可用于使用模块调试器来实现此目标。例如,使用WebPack:https://webpack.js.org/guides/caching/
还有其他方法,比如为脚本文件设置缓存响应头,但我不推荐这种情况。

62o28rlo

62o28rlo2#

您必须配置服务器的缓存策略。
nginx的例子:

location /{
     alias /www/your/app/;
     try_files $uri $uri/ /index.html;
     add_header Cache-Control "no-store, no-cache, must-revalidate";
}

你可以在这里了解更多https://medium.com/@pratheekhegde/setting-caching-headers-for-a-spa-in-nginx-eb2f75f52441

cuxqih21

cuxqih213#

我个人在我的开发环境中使用下面的测试

# Never cache these...
# HTTP 1.1=>Cache-Control, HTTP 1.0=>pragma and Expires=>proxy

# for html,htm,json,js,css as follows
<filesMatch "\.(html|htm|json|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "0"
  </ifModule>
</filesMatch>

服务器将ETag头添加到包含正在服务的资源的响应中,客户端缓存资源并记住其实体标签(ETag的值)。
另一种简单的方法是使用查询字符串,每次进行更改时递增querystring,或者每次进行更改时使用一些唯一的字符串,示例如下。你不必改变Apache配置,浏览器将加载相应的脚本。

# first version
<script src="path/to/your/app-loader.js?version=1"></script>
zi8p0yeb

zi8p0yeb4#

我在我的webpack配置中添加了chunkhash。这解决了我在每次部署时使缓存无效的问题。此外,我们需要注意index.html/ asset.manifest不会缓存在您的CDN或浏览器中。webpack配置中的chunk name配置如下所示:-
文件名:[chunkhash]-${Date.now()}.js
如果您正在使用contenthash
文件名:[contenthash]-${Date.now()}.js

66bbxpm5

66bbxpm55#

我的应用程序也遇到了同样的问题,我解决了清除该高速缓存(或者更准确地说,无缓存)的问题。
要做到这一点,只需在“head”标签中添加Meta标签,以确保页面的内容不会被缓存。

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
mdfafbf1

mdfafbf16#

发生这种情况的可能性很高,因为你没有在package.json中提升应用程序的版本。
每次你在应用程序中修改一些东西时,尝试遵循semver并修改“版本”:在package.json文件中相应地添加“0.1.0”属性。它可以手工完成,但适当的管道配置也应该完成这项工作。在此之后,您不应该有块错误或任何缓存的应用程序部分。这样,浏览器肯定会知道服务器上有新的应用程序版本。

相关问题