React 应用程序必须在新部署后清除浏览器缓存

Question

我们正在使用 Jenkins 管道在 apache 服务器上部署我们的 React 应用程序。当我们部署新代码时，大多数新功能都可以正常工作，但并非所有更改都反映了浏览器中的最新情况。用户必须打开隐身窗口或清除缓存才能看到新功能。

我已经看到了一些与 角度应用程序 相关的解决方案但是任何特定于 React 应用程序的解决方案，我都没有看到任何地方。在构建期间，我们可以添加一些东西来自动为最终用户提供最新的更改吗？我想，缓存破坏是必需的但是我们如何在不对代码进行大量修改的情况下做到这一点，就像上面的解决方案对 Angular 应用程序所做的那样。

原文由 Nimish goel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通常的方法是根据时间或内容向脚本和其他资产文件名添加哈希。所以之前你有 script.js 现在它将是 script.[contenthash].js 。每次更改脚本内容时，内容哈希都会不同。

现在，当用户请求您的应用程序的 index.html 时，它将引用包括各个内容哈希的脚本。如果用户之前加载了 script.abc123.js 并且现在 index.html 引用了 script.cba321.js 浏览器将知道它之前没有加载它。通过这种方式，用户拥有您的脚本和其他资产（js、css、图像等）的当前版本。然而，为了使其工作，重要的是用户始终加载 index.html 的最新版本。

这种方法不是特定于 React 的，而是一种通用的方法和最佳实践。然而，它被 create-react-app 使用和建议（参见：https: //github.com/facebook/create-react-app ）。

由于一直手动执行此操作非常乏味，因此有许多脚本和策略可用于使用模块打包器来实现此目标。例如，通过使用 WebPack：https: //webpack.js.org/guides/caching/

还有其他方法，例如为脚本文件设置缓存响应标头，但在这种情况下我不推荐这样做。

原文由 realAlexBarge 发布，翻译遵循 CC BY-SA 4.0 许可协议