对于在react项目开发中每次发版存在浏览器缓存问题解决办法

前言

首先,我们在进行开发前要有一个思路:
判断当前版本与前一个版本是否相同,不同就刷新页面。

1. 在每次运行时新建一个js文件

对于在react项目开发中每次发版存在浏览器缓存问题解决办法_第1张图片
(fs模块用于对系统文件及目录进行读写操作。)
通过fs进行写入文件:

const Version=new Date().getTime();
var content ="getVersion('"+Version+"')"
fs.writeFile('public/version.js',content,function(err){
  if(err){
    return console.log(err)
  }
})

在public文件家中就会出现version.js文件,这个js文件的内容为随机数。内容如下:
对于在react项目开发中每次发版存在浏览器缓存问题解决办法_第2张图片

再进入页面调用路由的时候引入这个js文件

{
            var versionScript=document.createElement('script');
            versionScript.src=window.location.origin+'/xxx/xxx/xxx/version.js?v='+new Date().getTime();
            var s=document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(versionScript,s)
        }}>
        //...
        

进行对比js文件然后决定是否刷新

对于在react项目开发中每次发版存在浏览器缓存问题解决办法_第3张图片

结语

这个方法绝大部分浏览器是没有问题的,开发结束后打开线上项目会出现一次闪屏,就说明我们的操作是成功的!

你可能感兴趣的:(对于在react项目开发中每次发版存在浏览器缓存问题解决办法)