清除前端缓存的方式

1.定义

浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

2.类型

缓存协商:Last-modified ,Etag

彻底缓存:cache-control,Expires

3.解决方案(以vue举例)

①.修改 webpack.prod.conf.js 文件

const date = new Date();

const timestamp = date.getTime(); // 时间戳

const version = timestamp; // 打包时候的版本号

var webpackConfig = merge(baseWebpackConfig, {

module: {

rules: utils.styleLoaders({

sourceMap: config.build.productionSourceMap,

extract: true

})

},

devtool: config.build.productionSourceMap ? '#source-map' : false,

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath(`js/[name].[chunkhash:8].{ version }.js?_t={ timestamp }`),

chunkFilename: utils.assetsPath(`js/[name].[chunkhash:8].{ version }.js?_t={ timestamp }`)

},

}

②. html 页面前面加 meta 标签,让所有的css/js资源重新加载

<meta http-equiv="pragram" content="no-cache">

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

③. 后端服务器 nginx 配置,让 index.html 不缓存

location = /index.html { add_header Cache-Control "no-cache, no-store"; }

④.vue.config.js或者 vue_loader.config.js

const version = new Date().getTime();

module.exports = {

loaders: utils.cssLoaders({

sourceMap: isProduction

? config.build.productionSourceMap

: config.dev.cssSourceMap,

extract: isProduction

}),

css: {

// 是否使用css分离插件 ExtractTextPlugin

extract: {

// 修改打包后css文件名 // css打包文件,添加时间戳

filename: `css/[name].${version}.css`,

chunkFilename: `css/[name].${version}.css`

}

},

configureWebpack: {

output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】

filename: `[name].{process.env.VUE_APP_Version}.{version}.js`,

chunkFilename: `[name].{process.env.VUE_APP_Version}.{version}.js`

}

}

}

相关推荐
MonkeyKing_sunyuhua3 小时前
Guava Cache 本地项目缓存
缓存·guava
笨手笨脚の9 天前
Redis 源码分析-Redis 中的事件驱动
数据库·redis·缓存·select·nio·epoll·io模型
(:满天星:)9 天前
Redis哨兵模式深度解析与实战部署
linux·服务器·网络·数据库·redis·缓存·centos
哆啦A梦的口袋呀9 天前
《HTTP权威指南》 第7章 缓存
网络协议·http·缓存
大模型最新论文速读9 天前
Agent成本降低46%:缓存规划器的思路模板
人工智能·深度学习·机器学习·缓存·语言模型·自然语言处理
用心分享技术9 天前
【Java面试】你是怎么控制缓存的更新?
java·缓存·面试
小时候的阳光10 天前
MyBatis 的一级缓存导致的数据一致性问题分析
缓存·mybatis·事务·隔离级别
wuxinyan12310 天前
Java面试题027:一文深入了解数据库Redis(3)
java·数据库·redis·缓存·面试题
亲爱的非洲野猪10 天前
Redis快的原因
数据库·redis·缓存
老马啸西风10 天前
从零开始手写redis(15)实现自己的 HashMap
数据库·redis·缓存