前端在开发应用的时候，合理利用缓存可提高应用性能。但有些缓存会给我们带来困扰，比如前端每次发版，浏览器存在缓存要刷新才能看到更新，这种体验很不好。针对这个问题我总结了两种有效方案。
一、meta标签处理
vue-cli里的默认配置，css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。关键在于index.html文件它会被浏览器缓存。浏览器访问的还是旧的静态资源。解决办法如下，在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" />
二、版本号 + 定时器
每次发版都应该有个版本号，很多开发者忽略了这个问题。这里我就用大白话说下我的思路。发版的时候我们把更新的版本号存放到静态文件中。然后定时用 ajax请求获取这个静态文件的版本号。最后跟浏览器内存中的版本号进行对比，如果不一致则说明有更新。js执行刷新页面。
// 定时获取版本号
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
