歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。

前言

最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是每次去通知用戶肯定不現實，所以需要對前端的js和css等文件採取一定的緩存失效的措施，強制瀏覽器重新去服務器獲取新的js代碼以及css文件。

樓主經過實際的項目情況反饋，總結以下兩點切實可行的辦法，分享給大家，希望對大家有幫助。

1. 路徑後面加時間戳或者隨機數的方式
2. 採用hash（md5）重命名文件

路徑後面加時間戳或者隨機數的方式

時間版本號

如果每次發佈，針對修改過的js或者css文件路徑加上時間的版本號，一般以年月日拼寫。

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

如果發生緊急情況，需要在一天當中對某些css或者js文件多次發版，可以把時間精確到時分秒。

目前樓主主推採用加版本號的方式，因為文件太多，只能做增量修改。好處是沒有做任何修改js或者css文件可以不用加版本號。

採用隨機數

document.write('<script src=\\".lib/common.js?r=' + Math.random() + "\\"" + '><\\/script>');

一般不建議用隨機數的方式，因為每次刷新頁面，隨機數都會變化，那麼瀏覽器認為一個新的url需要重新請求服務端獲取js或css文件，不會在使用瀏覽器本地緩存。同時佔用網絡帶寬，影響服務器響應速度。

採用hash（md5）重命名文件

可以利用 gulp-rev或者webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首頁，就是利用hash給js和css文件重命名。

"

歡迎關注我的頭條號：Wooola，專注於Java、Golang、微服務架構，致力於每天分享原創文章、快樂編碼和開源技術。

前言

最近發版前端項目，用戶經常反饋新添加功能在線上環境不好用，常出現新老頁面並存的狀況。經前端同事排查法發現，實際上只需要重新刷新一下頁面就沒事了。但是每次去通知用戶肯定不現實，所以需要對前端的js和css等文件採取一定的緩存失效的措施，強制瀏覽器重新去服務器獲取新的js代碼以及css文件。

樓主經過實際的項目情況反饋，總結以下兩點切實可行的辦法，分享給大家，希望對大家有幫助。

1. 路徑後面加時間戳或者隨機數的方式
2. 採用hash（md5）重命名文件

路徑後面加時間戳或者隨機數的方式

時間版本號

如果每次發佈，針對修改過的js或者css文件路徑加上時間的版本號，一般以年月日拼寫。

<script type="text/javascript" src="lib/common.js?v=20190719"></script>
<link rel="stylesheet" type="text/css" href="assets/css/ie/ie8.css?v=20190719" />

如果發生緊急情況，需要在一天當中對某些css或者js文件多次發版，可以把時間精確到時分秒。

目前樓主主推採用加版本號的方式，因為文件太多，只能做增量修改。好處是沒有做任何修改js或者css文件可以不用加版本號。

採用隨機數

document.write('<script src=\\".lib/common.js?r=' + Math.random() + "\\"" + '><\\/script>');

一般不建議用隨機數的方式，因為每次刷新頁面，隨機數都會變化，那麼瀏覽器認為一個新的url需要重新請求服務端獲取js或css文件，不會在使用瀏覽器本地緩存。同時佔用網絡帶寬，影響服務器響應速度。

採用hash（md5）重命名文件

可以利用 gulp-rev或者webpack

entry: {
 main: './src/common.js',
 slove: './src/ie8.js'
},
output: {
 filename: '[name].[hash].js',
 path: path.resolve(__dirname, 'dist')
}

例如百度搜索首頁，就是利用hash給js和css文件重命名。

"