当 create-react-app 部署发生 index.html 变化时触发硬缓存刷新
Trigger hard cache refresh when index.html changes in create-react-app deployment
我目前正在使用 "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 文件的路径随每次部署而变化），浏览器仍会缓存整个应用程序。即使对站点进行 "hard" 刷新也不会加载新内容。我必须完全删除缓存，然后重新加载任何内容才能刷新。
使用 create-react-app 缓存和通过 react-scripts 构建是否有一些技巧？我假设如果浏览器没有缓存应用程序，它只会查看 index.html 文件，并且再也不会查看它？否则我不明白为什么它在我重新部署时看不到 index.html 文件的更改。
那么，部署一个 create-react-app 应用程序有什么技巧，这样每次部署都会使浏览器的缓存失效，并且用户不需要通过箍来获取新版本？
这取决于您的部署管道的设置方式。可以有多层缓存：
- 如果您使用 CDN，它可能会缓存在那里。
- 如您的评论所述，Service Worker 可能正在缓存它。
- 根据您的 Apache 服务器的配置方式，它可能不会 "hot swap" 新文件并将它们加载到内存中。对我来说，我部署到一个 nginx 网络服务器，需要重新启动它才能将新文件重新加载到内存中。
- 听起来您已经通过硬刷新确保浏览器没有缓存。
最后，我不太确定您是如何指向硬编码的 main.[xxxyyyzz].js 文件的，因为如果下划线源文件已更改，哈希片段也会更改。
我目前正在使用 "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 文件的路径随每次部署而变化），浏览器仍会缓存整个应用程序。即使对站点进行 "hard" 刷新也不会加载新内容。我必须完全删除缓存，然后重新加载任何内容才能刷新。
使用 create-react-app 缓存和通过 react-scripts 构建是否有一些技巧？我假设如果浏览器没有缓存应用程序，它只会查看 index.html 文件，并且再也不会查看它？否则我不明白为什么它在我重新部署时看不到 index.html 文件的更改。
那么，部署一个 create-react-app 应用程序有什么技巧，这样每次部署都会使浏览器的缓存失效，并且用户不需要通过箍来获取新版本？
这取决于您的部署管道的设置方式。可以有多层缓存：
- 如果您使用 CDN，它可能会缓存在那里。
- 如您的评论所述，Service Worker 可能正在缓存它。
- 根据您的 Apache 服务器的配置方式，它可能不会 "hot swap" 新文件并将它们加载到内存中。对我来说，我部署到一个 nginx 网络服务器，需要重新启动它才能将新文件重新加载到内存中。
- 听起来您已经通过硬刷新确保浏览器没有缓存。
最后，我不太确定您是如何指向硬编码的 main.[xxxyyyzz].js 文件的，因为如果下划线源文件已更改，哈希片段也会更改。