清除前端缓存的方式

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`

}

}

}

相关推荐
拾忆,想起20 小时前
Redis复制延迟全解析:从毫秒到秒级的优化实战指南
java·开发语言·数据库·redis·后端·缓存·性能优化
破烂儿1 天前
基于机器学习的缓存准入策略研究
人工智能·机器学习·缓存
参.商.1 天前
【Day21】146.LRU缓存 (Least Recently Used)
leetcode·缓存·golang
Dorcas_FE1 天前
axios请求缓存与重复拦截:“相同请求未完成时,不发起新请求”
前端·spring·缓存
码熔burning1 天前
Redis 的三种高效缓存读写策略!
redis·缓存·mybatis
Armyyyyy丶2 天前
Redis底层实现原理之五大基础结构
数据结构·redis·缓存
Volunteer Technology2 天前
三高项目-缓存设计
java·spring·缓存·高并发·高可用·高数据量
2302_809798322 天前
【Redis】缓存的穿透、击穿和雪崩
数据库·redis·缓存
Listen-Y2 天前
设计艺术~缓存结构设计
缓存
叫我阿柒啊2 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api