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

前言

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

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

图片描述
(fs模块用于对系统文件及目录进行读写操做。)
经过fs进行写入文件:spa

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文件的内容为随机数。内容以下:
图片描述code

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

<Route name="home" breadcrumbName="首页" path="/" component={MainLayout} onEnter={(a,b)=>{
            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)
        }}>
        //...
        </Route>

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

图片描述

结语

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

相关文章
相关标签/搜索