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文件，因为如果下划线的源文件已更改，则哈希片段也会更改。