對於在react項目開發中每次發版存在瀏覽器緩存問題解決辦法

前言

首先，我們在進行開發前要有一個思路：
判斷當前版本與前一個版本是否相同，不同就刷新頁面。

1. 在每次運行時新建一個js文件

（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文件的內容爲隨機數。內容如下：

再進入頁面調用路由的時候引入這個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文件然後決定是否刷新

結語

這個方法絕大部分瀏覽器是沒有問題的，開發結束後打開線上項目會出現一次閃屏，就說明我們的操作是成功的！