问题描述
在使用vue脚手架搭建前端工程时,经常会遇到打包上线后的缓存问题。具体表现为,当程序版本升级时,用户仍然访问到旧版本的页面。许多开发者会直接在index.html中加入类似以下代码来解决缓存问题:
<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">
这种方法虽然解决了缓存问题,但却导致用户每次访问程序都需要重新请求服务器,无法利用静态资源的缓存,从而增加了流量消耗和网络压力。
需求澄清
实际上,我们需要解决的问题并不是简单地要缓存或不要缓存,而是希望根据情况灵活控制
解决原理
在vue脚手架的每次打包过程中,会给生成的静态资源文件名添加哈希后缀,并 index.html中引入带有相应哈希后缀的静态资源文件。因此,每个版本的静态资源都是被正确引入的,不会因升级而出现缓存问题。因此,我们只需让index.html不被缓存,而让其他静态资源可以被缓存,即可满足需求。
然而,要实现让静态资源被缓存,但让index.html不被缓存,则需要借助服务器配置,通过设置针对index.html请求的header来控制缓存。
具体实现
Nginx服务器配置
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
Apache服务器配置
如果你使用Apache服务器,你可以在VirtualHost中增加以下配置:
<Files "index.html">
Header set Cache-Control "no-cache, no-store"
</Files>
修改webpack的配置文件
同时,你也可以通过修改webpack的配置文件来实现对静态资源文件名的哈希处理,以确保静态资源能够被有效缓存:
onst Timestamp = new Date().getTime();
// Vue.config.js 配置选项
module.exports = {
configureWebpack: { // webpack 配置
output: { // 输出重构 打包编译后的 文件名称:【模块名称.contenthash】使用contenthash保证了文件被修改才会重新生成新的文件名,让用户能有效使用浏览器缓存,减轻服务器压力
filename: `static/js/[name].[contenthash:8].js`,
chunkFilename: `static/js/[name].[contenthash:8].js`
},
}
}
通过以上步骤,你可以灵活地控制缓存,让用户在程序升级后访问到最新版本的页面,同时减少了静态资源的重复请求,优化了用户体验和网络流量消耗。
原文地址:https://blog.csdn.net/qq_45503196/article/details/134668286
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_4000.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!