关于前端更新需要清空浏览器缓存

一、HTTP缓存之Cache-Control

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。这些指令通常覆盖默认缓存算法。缓存指令是单向的，即请求中存在一个指令并不意味着响应中将存在同一个指令。

网页的缓存是由HTTP消息头中的“Cache-Control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

http1.1新增了 Cache-Control 来定义缓存过期时间。

注意：若报文中同时出现了 Expires 和 Cache-Control，则以 Cache-Control 为准。

Cache-Control也是一个通用首部字段，这意味着它能分别在请求报文和响应报文中使用。在RFC中规范了 Cache-Control 的格式为：

"Cache-Control" ":" cache-directive

表 1. 常用的 cache-directive 的可选值有

表 2. 对 Cache-Control 值的浏览器响应

Cache-Control: max-age=3600, must-revalidate 它意味着该资源是从原服务器上取得的， 且其缓存（新鲜度）的有效时间为一小时，在后续一小时内，用户重新访问该资源则无须发送请求。 

这种组合的方式也会有些限制，比如 no-cache 就不能和 max-age、min-fresh、max-stale 一起搭配使用。

组合的形式还能做一些浏览器行为不一致的兼容处理。例如在IE我们可以使用 no-cache 来防止点击“后退”按钮时页面资源从缓存加载，但在 Firefox 中，需要使用 no-store 才能防止历史回退时浏览器不从缓存中去读取数据，故我们在响应报头加上如下组合值即可做兼容处理：

Cache-Control: no-cache, no-store

二、清理网站缓存的几种方法

1. meta方法，在html里head区添加代码（vue项目-根目录index.html）

<--如果需要在html页面上设置不缓存，这在标签中加入如下语句-->

   
  
   
   
   
   
   
     <--用于设定禁止浏览器从本地机的缓存中调阅页面内容--> 
    
      <-- Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。--> 
      
      
     
   

2. 清理临时缓存（form表单）

 3. jquery ajax清除浏览器缓存的两种方法：

// 1）、通过$.ajaxSetup 设置属性cache:false,让ajax不调用浏览的缓存: jQuery.ajaxSetup ({cache:false}) // 2）、在ajax的url后加上随机串来避免浏览缓存，随机数也是避免缓存的一种很不错的方法： $.ajax({url:'test.php?'+parseInt(Math.random()*)})

4. js 代码清除缓存

（原理：增加了一个参数，且该参数是一个随机数，每次都不一样，所以每次的请求参数都不一样，服务器会将其作为一个新的请求，重新返回结果，而不会使用缓存）

 // css文件加一个标识 强制浏览器重新加载此文件 
   
     // 图片文件： background:url(.png?) 加一个标识号，使图片不被缓存 
   

5. Vue项目-配置 vue.config.js（使用时间戳）

const Version = new Date().getTime() module.exports = { css: { loaderOptions: { sass: { data: `@import "@/components/themes/_handle.scss";` } }, // 是否使用css分离插件 ExtractTextPlugin extract: { // 修改打包后css文件名 filename: `static/css/[name].${Version}.css`, chunkFilename: `static/css/[name].${Version}.css` } }, configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `static/js/[name].${Version}.js`, chunkFilename: `static/js/[name].${Version}.js` } }, chainWebpack(config) { // img的文件名修改 config.module .rule('images') .use('url-loader') .tap(options => { options.name = `static/img/[name].${Version}.[ext]` options.fallback = { loader: 'file-loader', options: { name: `static/img/[name].${Version}.[ext]` } } return options }) } } 

6. Vue项目 – 在package.json文件中，有个属性：version，每次打包时，改变一下内容

7. 配置 nginx 不缓存 html

vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html 

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        try_files $uri $uri/ /index.html;
        root /yourdir/;
        index index.html index.htm;
 
        if ($request_filename ~* .*\.(?:htm|html)$)
        {
            add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存
        }      
      }
}