我们正在使用 Jenkins 管道在 apache 服务器上部署我们的 React 应用程序。
当我们部署新代码时，大多数新功能都可以正常工作，但并非所有更改都反射(reflect)了浏览器中的最新版本。用户必须打开隐身窗口或清除缓存才能看到新功能。
我见过一些与 angular applications 相关的解决方案但是任何特定于 React 应用程序的东西，我在任何地方都看不到。
在构建期间，我们可以添加一些自动为最终用户提供最新更改的内容吗？我想，缓存破坏是必需的，但是我们怎么能不对代码进行大量修改，就像上面的解决方案对 Angular 应用程序所做的那样。
最佳答案
通常的方法是根据时间或内容向脚本和其他 Assets 文件名添加哈希。所以当你之前有 script.js现在将是 script.[contenthash].js .每次更改脚本的内容时，内容哈希都会有所不同。
现在当用户请求 index.html在您的应用程序中，它将引用包含单个内容哈希的脚本。如果用户之前加载了 script.abc123.js现在是 index.html引用 script.cba321.js浏览器会知道它以前没有看到过这个文件并加载它。这样，用户就可以拥有您的脚本和其他 Assets (js、css、图像...)的当前版本。但是，要使此功能正常工作，重要的是用户始终加载 index.html 的最新版本。 .
这种方法不是特定于 react 的，而是一种通用方法和最佳实践。然而，create-react-app 使用并建议使用它。 (见:https://github.com/facebook/create-react-app)。
由于一直手动执行此操作会非常乏味，因此有很多脚本和策略可用于使用模块捆绑器来实现此目标。例如。通过使用 WebPack:https://webpack.js.org/guides/caching/
还有其他方法，例如为脚本文件设置缓存响应 header ，但是在这种情况下我不推荐。
关于javascript - React 应用程序必须在新部署后清除浏览器缓存，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61813991/