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



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

3.html页面缓存的原因



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

参考文章

Service Worker API 服务工作线程概念和用法

Service Worker简介

React 项目生产版本迭代页面不刷新问题的更多相关文章

  1. React项目实战:react-redux-router基本原理

    React相关 React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架. JSX 本质上来讲,JSX 只是为React.createElement(component, props, .. ...

  2. webpack构建多页面react项目(webpack+typescript+react)

    目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件 ...

  3. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  4. 前端项目中使用git来做分支和合并分支,管理生产版本

    最近由于公司前端团队扩招,虽然小小的三四团队开发,但是也出现了好多问题.最让人揪心的是代码的管理问题:公司最近把版本控制工具从svn升级为git.前端H5组目前对git的使用还不是很熟悉,出现额多次覆 ...

  5. 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

    Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...

  6. SAAS云平台搭建札记: (四) AntD For React使用react-router-dom路由接收不同参数页面不刷新的问题

    在.net开发员眼里,如果使用MVC,根据路由匹配原则,可以通过各种方式接收参数,比如 /Post/List/1, /Post/List/2,或者 /Post/List?id=1,/Post/List ...

  7. java项目如何使用ajax来减少页面的刷新

    之前写项目,总是用重定向或请求转发,导致每做一步动作就会刷新页面,客户体验不好,而且效率低下,这种问题可以使用ajax来有效的解决此类问题的发生. 我使用的框架:Spring boot 数据库:mys ...

  8. html(对php也有效)页面自动刷新和跳转(简单版本)

    <html>    <head><title>html页面自动刷新和跳转</title><meta http-equiv="Refres ...

  9. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

随机推荐

  1. Python_跟随目标主机IP变换

    ''' 为了防止黑客攻击或者负载均衡,会经常变换主机,这样同一个域名在不同时间可能会对应不同的IP地址,在这种情况下可以通过 socket模块的gethostbyname()函数来实时获取目标主机的I ...

  2. 语音识别中的CTC算法的基本原理解释

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者:罗冬日 目前主流的语音识别都大致分为特征提取,声学模型,语音模型几个部分.目前结合神经网络的端到端的声学模型训练方法主要CTC和基 ...

  3. React从入门到放弃之前奏(1):webpack4简介

    接触webpack是好久之前的事情了,最近看了下webpack没想到都到4了. webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 会创建1个 ...

  4. Web3与智能合约交互实战

    写在前面 在最初学习以太坊的时候,很多人都是自己创建以太坊节点后,使用geth与之交互.这种使用命令行交互的方法虽然让很多程序员感到兴奋(黑客帝国的既视感?),但不可能指望普通用户通过命令行使用Dap ...

  5. PAT1049:Counting Ones

    1049. Counting Ones (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The tas ...

  6. wireshark使用方法

    抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接口.点击Capture Opti ...

  7. 设置ActiveMQ的访问密码

    1.设置ActiveMQ的访问密码,以提高ActiveMQ的安全性 2.在ActiveMQ的conf目录的activemq.xml中添加账号密码 2.1  添加的代码如下 <!-- 添加访问Ac ...

  8. composer安装以及更新问题,配置中国镜像源。

    配置国内镜像源 中国镜像源 https://pkg.phpcomposer.com/ composer 中文官网地址 http://www.phpcomposer.com/ 下载 Composer 安 ...

  9. checkbox事件的变化

    <input type="checkbox" checked={this.state.checked} onChange={this.checkedChangeHandler ...

  10. Mysql-如何正确的使用索引以及索引的原理

    一. 介绍 二. 索引的原理 三. 索引的数据结构 四. 聚集索引与辅助索引 五. MySQL索引管理 六. 测试索引 七. 正确使用索引 八. 联合索引与覆盖索引 九. 查询优化神器-explain ...