当index.html在创建-反应-应用程序部署中更改时触发硬缓存刷新

Question

我目前正在构建和部署我的创建-反应-应用程序网站使用“反应-脚本构建”，然后复制构建目录的内容到一个apache目录。web目录包含一个index.html文件，该文件通过如下脚本标记指向已编译的React文件：

<script type="text/javascript" src="/static/js/main.dd92ea42.js"></script>

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

是否有一些技巧来缓存与创建-反应-应用程序和构建通过反应-脚本？我假设浏览器只在没有缓存应用程序的情况下才会查看index.html文件，而不会再查看它？否则，当我重新部署时，我不明白为什么它看不到对index.html文件的更改。

那么，部署一个create应用程序的诀窍是什么，这样每个部署都会使浏览器的缓存失效，并且用户不需要通过循环获得新版本？

Answer 1

这取决于如何设置部署管道。可以在几个层进行缓存：

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

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

Answer 2

在部署时触发硬缓存刷新取决于您在CDN中缓存应用程序的方式。

因此，为了使缓存无效，我们需要创建一个唯一的文件名，以便CDN被缓存中断。

然后可以继续手动或以编程方式执行重新加载，以在浏览器中执行缓存中断。

这里是一个系列文章w https://dev.to/mnathani/how-to-cache-frontend-app-1kkj