强缓存与协商缓存

1.强缓存

强缓存会直接从缓存中读取，不发请求给服务器。
cache-control的几个取值定义：
private：仅浏览器缓存，
public：浏览器和代理服务器都可以缓存
max-age：设置强缓存时长(s)
no-cache：不进行强缓存
no-store：不进行强缓存也不进行协商缓存
强缓存的存储地点又分为：
1.memory cache(内存缓存)
2.dist cache(磁盘缓存)

2.协商缓存

1.cache-control的值no-cache
2.强缓存失效
当强缓存失效后，浏览器会携带缓存标识向服务器发起请求，由服务器根据缓存标识来决定是否使用缓存。
返回的响应头携带两个参数：
ETag：操作系统根据文件内容生成一个hash，文件内容变化，它就会变化。
last-modified：文件的最后修改时间

3.缓存方案

HTML：强缓存
css，js，图片：协商缓存，文件带上hash

4.刷新对缓存的影响

1.f5刷新网页时，跳过强缓存，进行协商缓存
2.ctrl+f5刷新页面时会跳过强缓存和协商缓存，直接向服务器请求

vue中配置js文件带上时间戳

//vue.config.js
const timestamp = new Date().getTime()
module.exports = defineConfig({
  configureWebpack: {
    output: { // 输出重构  打包编译后的 文件名称 + 时间戳】
      filename: `[name].${timestamp}.js`,
      chunkFilename: `[name].${timestamp}.js`
    },
  }
})