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`
}
}
}