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

【问题标题】：Trigger hard cache refresh when index.html changes in create-react-app deployment在 create-react-app 部署中 index.html 更改时触发硬缓存刷新
【发布时间】：2018-05-19 10:45:21
【问题描述】：

我目前正在使用“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 应用程序的技巧是什么，这样每次部署都会使浏览器的缓存失效，而用户无需费劲就可以获得新版本？

【问题讨论】：

你在使用 serviceWorker 吗？
是的，据我所知。我的 index.js 基本上只包含这个： ReactDOM.render(, document.getElementById('root'));注册服务工作者（）；而且我还没有接触到实际的 registerServiceWorker。
@Dan 你解决了吗？这个问题没有答案。
不，我还没有解决它，并且没有优先考虑它，因此缺乏答案。谷歌搜索，似乎还有其他几种我还没有机会尝试的建议方法。
我最终禁用了服务工作者，因为我真的不需要我的网站可以离线访问。到目前为止，我还没有意识到 service worker 的功能。无论如何，我按照这里的说明进行操作：github.com/facebook/create-react-app/blob/master/packages/…

标签： reactjs caching deployment create-react-app react-scripts

【解决方案1】：

这取决于您的部署管道是如何设置的。可能有多层缓存：

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

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

【讨论】：

感谢您提供的可能性列表。正如您所提到的，在我的情况下，这完全是服务人员的错，当我最初设置我的网站时，我不明白这一点。禁用它解决了我的问题。至于硬编码的 js 文件，那是构建过程生成的，所以我个人并没有在我的开发环境中硬编码。