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

标签 javascript reactjs apache caching deployment

我们正在使用 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/

相关文章:

javascript - “Alajax” jQuery简易表单提交。如果表单未经验证,如何防止提交?

javascript - ReactJS 无法获取状态,错误 : "Cannot read property ' state' of null"

javascript - 为什么使用 Ant Tree Design 在子组件中未选中树复选框

linux - 在 linux apache php 上访问我的网站时突然出现 505 错误

javascript - jQuery 附加到动态创建的 div

javascript - 逗号运算符在 JavaScript 中的作用是什么?

javascript - JS/React函数返回字符串属性,但返回[object Object]

reactjs - 更改按钮颜色 react 原生

java - 将 POI 与 gradle 一起使用时出现重复输入错误

mod_proxy_http.c 之前的 Apache 模块