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

2019年9月20日 186次阅读 来源: 王振宁

前言

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

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

《对于在react项目开发中每次发版存在浏览器缓存问题解决办法》
（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项目开发中每次发版存在浏览器缓存问题解决办法》

再进入页面调用路由的时候引入这个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文件然后决定是否刷新

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

结语

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

    原文作者：王振宁
    原文地址: https://segmentfault.com/a/1190000018672858
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞