没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

React项目解决生产环境版本迭代时的缓存问题


timg (1).jpeg
React开发项目时在本地是不会出现缓存问题的,基本上都是热部署,因此这样的问题往往会被忽略掉,但是做为与用户交互较强的应用程序来说,必定会有一系列问题。

React项目解决生产环境版本迭代时的缓存问题

比如上个版本的业务逻辑和本次更新版本的业务逻辑不一致,请求数据也会发生改变,那么对部分用户会带来不可预测的错误。用户需要清理缓存或者强制刷新才能解决这类问题,但是用户的行为我们很难控制。

那么这里提供两种处理方案,仅供参考,反正是在我的项目中解决了这样的问题。

解决思路

既然需要用户强制刷新,那么我们可以采用在URL中增加不同的参数,起到刷新的作用。

首先在react项目的静态资源目录(public),新建一个控制版本的文件比如version.js写入逻辑代码

var app_version = 'v20181101174616'

console.log(app_version)
function addQueryStringArg (url, name, value) {
 url += url.indexOf('?') === -1 ? '?' : '&'
 url += encodeURIComponent(name) + '=' + encodeURIComponent(value)
 return url
}
var url = window.location.href, version = window.localStorage.getItem('app_version')
if (app_version !== version) {
 window.location.href = addQueryStringArg(url, 'v', app_version)
 window.localStorage.setItem('app_version', app_version)
}

这段代码就是处理URL的,app_version是我们自定义的程序版本号,用户访问会写到本地存储中,每一次访问都会和本地存储的版本好对比,如果版本号不存在或者和更新文件中的版本号不一致,那么就会在URL中加入版本号页面重新刷新一次,可以起到强制刷新的作用。

然后在index.html文件中引入version.js文件

document.write('<script id="varsion" src=%PUBLIC_URL%/version.js?v=' + (+new Date()) + '></script>')
这里为啥要这样引入?原因是version.js文件也会被缓存。访问version.js文件时加上时间戳取最新的。

React项目解决生产环境版本迭代时的缓存问题
这样的解决方案用了一段时间发现还是有一定问题,然后结合如下的方法去使用。

在public目录下新建一个m.manifest文件,有兴趣的同学也可以去了解一下manifest文件。

什么是manifest?

简单来说manifest能让你的应用在无网的情况下也能访问。

它有三大优势:

1、离线浏览,无网情况下也能正常访问;

2、更快的加载速度,缓存在本地访问速度自然更快;

3、减轻服务请求压力,文件缓存后不需要再次请求,只需要请求需要更新的文件。

也就是说manifest文件可以告诉服务器,那些文件需要缓存,那些文件是不需要缓存的。

在manifest文件中写入

CACHE MANIFEST
20181105143912
# 直接缓存的文件d
CACHE:
# 需要在时间在线的文件
NETWORK:
*
# 替代方案
FALLBACK:

CACHE是需要缓存的文件,NETWORK用*表示所有的文件都是不需要缓存的直接从服务器获取最新资源。

还是需要在入口文件index.html中引入

<!DOCTYPE html>
<html manifest="%PUBLIC_URL%/m.manifest" lang="zh-CN">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>
<body>
 <div id="root"></div>
 </body>
 </html>

接下来去访问项目时会发现控制台中有信息打印处理,我这是访问过的信息

React项目解决生产环境版本迭代时的缓存问题
到这步是可以解决React项目在线上运行时的缓存问题,反正在我的项目中均使用了这种方案,缓存问题也得到了解决。

  1. 搬瓦工说道:

    学习技术来了

    1. 技术库说道:

      感谢支持

文章评论已关闭!