使用gitee部署静态网站缓存问题及解决办法

1-使用gitee部署网站重大缺陷

在第一次加载网站后，浏览器会将除 html 外所有文件都缓存起来
平常来说，这是好事
但是在需要频繁修改的网站时，这反而是一个重大缺陷
原因在于使用了 git 重新提交修改后的文件，协商缓存ETag和Last-Modified虽然会改变，但是服务器同时给资源都添加上了强缓存Expires和Cache-Control（一天的时间），且强缓存优先级大于协商缓存
这就导致网页更新不了，需要强制刷新或删除缓存，重新加载文件
使得每一次改文件提交都是折磨！！！！

2-解决方法总结

2.1 不使用缓存功能（得看浏览器给不给机会了，有些浏览器就是强制缓存）

添加meta标签，给请求头添加不缓存标志

  <!-- 不缓存 -->
  <!-- http 1.0 -->
  <meta http-equiv="pragma" content="no-cache" />
  <!-- http 1.1 -->
  <meta http-equiv="content-type" content="no-cache, must-revalidate" />
  <!-- http 1.0 -->
  <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

2.2 给引入的文件添加上版本号（最适宜）

<link rel="stylesheet" href="./css/common100001.css">
/* 下次改动时 */
/* 下次改动时，修改这个标签和文件名，自然就重新加载了 */
<link rel="stylesheet" href="./css/common100002.css">

2.3 针对 js ,使用添加时间戳的方式

创建script标签
获取当前时间戳 new date().getTime()
将其添加到 src=‘…/js?’ + new date().getTime() + …
这样每次发送的请求是不一样的，自然不会缓存了

编辑 | sishen
来源 | 前端兔
公众号 | 前端兔

关注公众号查看更多前端知识分享~~