前端在開發(fā)應用的時候，合理利用緩存可提高應用性能抒线。但有些緩存會給我們帶來困擾，比如前端每次發(fā)版渣慕，瀏覽器存在緩存要刷新才能看到更新嘶炭，這種體驗很不好。針對這個問題我總結(jié)了兩種有效方案逊桦。
一眨猎、meta標簽處理
vue-cli里的默認配置，css和js的名字都加了哈希值强经，所以新版本css睡陪、js和就舊版本的名字是不同的，不會有緩存問題匿情。關(guān)鍵在于index.html文件它會被瀏覽器緩存兰迫。瀏覽器訪問的還是舊的靜態(tài)資源。解決辦法如下炬称，在meta標簽禁止瀏覽器緩存 html
<meta http-equiv="cache-control" content="no-cache,no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
二汁果、版本號 + 定時器
每次發(fā)版都應該有個版本號，很多開發(fā)者忽略了這個問題玲躯。這里我就用大白話說下我的思路据德。發(fā)版的時候我們把更新的版本號存放到靜態(tài)文件中。然后定時用 ajax請求獲取這個靜態(tài)文件的版本號跷车。最后跟瀏覽器內(nèi)存中的版本號進行對比棘利，如果不一致則說明有更新。js執(zhí)行刷新頁面朽缴。
// 定時獲取版本號
setInterval(() => {
checkUpdate()
}, 6000)
function checkUpdate() {
axios
.get(`/getVersion?timestamp=${Date.parse(new Date())}`)
.then(function(response) {
// 判斷版本號是否與本地一致
if (response.version != localStorage.getItem('version')) {
localStorage.setItem('version', response.version)
location.reload()
} else {
//版本號一致不做處理
console('版本號一致不做處理')
}
})
.catch(function(error) {
console.log(error)
})
}
image.png
