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

Question

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

我已经看到了相关的几个解决方案的角度应用 但任何特定反应的应用程序，我没有看到任何地方。在构建期间，我们可以添加一些可以自动为最终用户提供最新更改的内容吗？我想， Cache busting 是必需的 但是我们怎么能在代码中没有大量修改，就像上面的解决方案对 Angular 应用程序所做的那样。

Answer 1

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

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

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

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

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