当index.html更改Create-React-App部署时,触发硬缓存刷新



我当前使用"反应式构建",然后将构建目录的内容复制到Apache Web目录。Web目录包含一个index.html文件,该文件通过这样的脚本标签指向编译的React JS文件:

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

这就是"反应式构建"的所有内置行为。我发现的是,即使创建了一个新的index.html文件,并且它具有内容更改(通往.js文件随着每个部署而更改的路径),浏览器仍然可以缓存整个应用程序。即使对网站进行"硬"刷新也不会加载新内容。我必须完全删除缓存,然后重新加载以刷新任何东西。

是否有一些技巧可以通过create-react-app进行缓存和通过反应脚本构建?我认为,如果浏览器没有应用程序,浏览器仅查看index.html文件,而又再也不会查看它?否则,我不明白为什么我重新部署时不会看到index.html文件的更改。

那么,部署Create-React-app应用程序的诀窍是什么,使得每个部署都使浏览器的缓存无效,而用户无需浏览箍即可获得新版本?

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

  • 如果您使用CDN,则可能会在那里缓存。
  • 与您的评论一样,服务工作者可能正在缓存。
  • 根据如何配置Apache服务器,它可能不会"热交换"新文件并将它们加载到内存中。对我来说,我部署到NGINX Web服务器,该服务器需要重新启动以将新文件重新加载到内存。
  • 听起来您已经确保浏览器不会通过硬刷新缓存。

最后,我不太确定您是如何指向硬编码主。[xxxyyyzz] .js文件,因为如果下划线源文件已更改,则哈希片段会更改。

在部署上触发硬缓存刷新取决于您如何缓存cdn中的应用程序。

因此,为了使缓存无效,我们需要创建一个唯一的文件名,以便CDN获得缓存

然后可以手动或编程进行重新加载以在浏览器中执行缓存胸围。

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

最新更新