前端项目上线后,页面因浏览器缓存未刷新问题

2023-08-29  本文已影响0人  _Bell_

当前端页面开发测试完成后进行上线时,有时候在将更新的页面上传到服务器之后,浏览器并没有立即展示新的页面,而继续渲染旧的页面。这是因为浏览器默认会对已访问过的页面进行缓存,以提高性能。因此,当页面内容发生变动时,浏览器会仍然使用缓存中的旧页面,而无法获取到最新的页面内容。

虽然刷新或者清除缓存能解决这方面的问题,但是用户并不知道什么时候需要清除缓存,或者根本不知道如何操作。

所以,需要解决文件变动后浏览器没有更新的问题。

解决方案

一般情况下cssjsimg 的名字都加了哈希值,所以新版本和就版本的名字是不同的,不会有缓存问题。

但是把打包好的index.html放到服务器后,index.html在服务器端可能是有缓存的。

所以只要 入口文件不缓存 这样就解决问题了。在入口文件head中添加以下代码即可:

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

综上所述,Expires指定资源的过期时间,Pragma可用于禁用缓存,Cache-Control提供了更灵活的缓存控制选项,而Cache是指存储在浏览器本地的缓存资源。

参考资料:

上一篇 下一篇

猜你喜欢

热点阅读