前端文件缓存清理方案

---

方案一：meta方法，在head标签里添加代码。

<!-- 指定Expires值为一个早已过去的时间，访问时若重复在地址栏按回车，每次都会重复访问 -->
<meta http-equiv="Expires" content="0">
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容。(这样设定，访问者将无法脱机浏览。) -->
<meta http-equiv="Pragma" content="no-cache">
<!-- Cache-control值为no-cache时，访问此页面不会在Internet临时文件夹留下页面备份 -->
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
指令含义如下：

指令	含义
Public	指示响应可被任何缓存区缓存。
Private	指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
no-cache	指示请求或响应消息不能缓存。
no-store	用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age	指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
min-fresh	指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale	指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

方案二：css和js文件清除缓存。

<link rel="stylesheet" href="../css/index.css"/>
<script src="../js/index.js"></script>

改为以下写法

<link rel="stylesheet" href="../css/index.css?v=20201037"/>
<script src="../js/index.js?v=20201037"></script>

可优化为：

<script type="text/javascript">
        document.write('<script src="../js/index.js?v=' + new Date().getTime() +'" type="text/javascript" charset="utf-8"><\/script>');
</script>

方案三：nginx配置不缓存。

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}
 
// 配置了反向代理则如下：(xx为你的代理的项目名) 
location = /xx {
    add_header Cache-Control "no-cache, no-store";
}