reactjs – 当index.html在create-react-app部署中发生更改时触发硬缓存刷新

我目前正在使用“react-scripts build”构建和部署我的create-react-app站点,然后将构建目录的内容复制到apache web目录. web目录包含一个index.html文件,它通过脚本标记指向编译的React js文件,如下所示:
<script type="text/javascript" src="/static/js/main.dd92ea42.js"></script>

这就是“react-script build”的所有内置行为.我发现即使创建了一个新的index.html文件,并且它有内容更改(该.js文件的路径随每次部署而改变),浏览器仍然会缓存整个应用程序.即使对网站进行“硬”刷新也不会加载新内容.我必须完全删除缓存,然后重新加载任何要刷新的东西.

是否有一些技巧可以通过create-react-app缓存并通过react-scripts构建?我假设浏览器只查看index.html文件,如果它没有缓存应用程序,并且再也不会查看它?否则我不明白为什么在重新部署时它没有看到对index.html文件的更改.

那么,部署create-react-app应用程序的诀窍是什么,这样每个部署都会使浏览器的缓存失效,而用户不需要通过环节来获得新版本?

解决方法

这取决于您的部署管道的设置方式.可以在多个层进行缓存:

>如果你使用CDN,它可能会缓存在那里.
>在您的评论中,服务工作者可以缓存它.
>根据Apache服务器的配置方式,它可能不会“热交换”新文件并将其加载到内存中.对我来说,我部署到一个需要重新启动的Nginx Web服务器,以便将新文件重新加载到内存中.
>听起来你已经确定浏览器没有通过硬刷新缓存.

最后,我不太确定你是如何指向一个硬编码的主.[xxxyyyzz] .js文件,因为如果下划线源文件发生了变化,哈希片段会发生变化.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...