React 项目生产版本迭代页面不刷新问题

React 页面缓存

react 打包项目进行服务端部署后,会发现index.html被浏览器缓存,访问项目url指向的还是上个版本的内容。原理是index.html被缓存后,路由指向和跳转都是旧版的js和css文件,所以会出现react项目更新后,刷新浏览器显示旧版本内容的现象。可以通过强制清除缓存看到新版本页面,但是在发布版本的时候不能要求每个用户去操作清除浏览器的缓存,所以需要在程序中找到解决办法。

1.html 在head标签头添加cache和cache-control

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">

上述方法在项目部署后并没有起到作用。

2.html 在head标签头添加cache和cache-control

create-react-app 脚手架在创建项目后,运行打包命令

npm run build / yarn build
precache-manifest

这个文件是项目针对于浏览器中需要缓存的文件目录,可以在最下面找到index.html文件的缓存,把他注释掉后面版本迭代再也没有出现过浏览器总是出现旧版本的情况,也不需要强制清除浏览器缓存。

3.html页面缓存的原因

registerServicesWorker.js

很多同学都会发现项目新建完成后会在src文件下生成一下个registerServicesWorker.js文件,它的作用简单说来就是将项目中不需要动态生成的文件,以缓存的形式存储在浏览器的Cache Storage中,包括index.html,所以这个就是生成缓存的来源,具体的作用大家可以去官网上查看相应解释。

参考文章
Service Worker API 服务工作线程概念和用法

Service Worker简介

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,418评论 4 61
  • API定义规范 本规范设计基于如下使用场景: 请求频率不是非常高:如果产品的使用周期内请求频率非常高,建议使用双通...
    有涯逐无涯阅读 7,775评论 0 6
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,871评论 1 32
  • ————————————————————————————————瞿三 做小决定的时候,听从自己的大脑,做大决定的时...
    瞿三阅读 1,828评论 0 1
  • 2018.01.30~2018.03.07这36天过的特别揪心。01.30号我正式离职,也开始了我的内心斗争。 我...
    筑景阅读 1,306评论 1 3

友情链接更多精彩内容