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

Question

我目前正在使用"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应用程序的诀窍是什么,这样每个部署都会使浏览器的缓存失效,而用户不需要通过环节来获得新版本？

Answer 1

这取决于您的部署管道的设置方式。可能有几层缓存：

• 如果您使用 CDN，它可能会缓存在那里。
• 正如您的评论中所述，服务人员可能正在缓存它。
• 根据 Apache 服务器的配置方式，它可能不会“热交换”新文件并将其加载到内存中。对我来说，我部署到一个 nginx Web 服务器，需要重新启动它才能将新文件重新加载到内存中。
• 听起来您已经确保浏览器不会通过硬刷新进行缓存。

最后，我不太确定您如何指向硬编码的 main.[xxxyyyzz].js 文件，因为如果下划线源文件发生更改，哈希片段也会发生变化。