网页缓存清除方案

因为在基于原生 js + jQ 开发微信活动页面时，已经上线的项目。更改，缓存实在是影响严重。故有了以下总结

---

方案一

改文件名

---

方案二

链接尾部加上资源版本号，更改过的资源，需要更新版本号

<link rel="stylesheet" type="text/css" href="./css/index.css?v=1.0">
<img class="banner--event-date" src="./imgs/event_date.png?v=1.0" alt="">
<script src="./js/index.js?v=1.0" type="text/javascript" charset="utf-8"></script>

.step-1 {
    background-image: url(../imgs/step_1.png?v=1.0);
}

---

方案三

建立版本号比对校验，每次发版，都要更新版本号

• index.js

;(function($) {
  // 必须与 version.json 版本一致
  var version = '1.0';

  // 获取当前目录路径
  var jsLoaded = document.scripts;
  var currentJs = jsLoaded[jsLoaded.length - 1].src;
  var path = currentJs.substring(0, currentJs.lastIndexOf('/') + 1);

  $.ajax({
    url: path + 'version.json?date=' + Date.now(),  // 禁止缓存文件
    method: 'GET',
    success: function(res) {
      // 版本号不一致时，存在缓存。强制刷新
      if (res.version != version) {
        location.reload(true);
      }
    },
    error: function(error) {
      console.warn(error)
    }
  })
})(window.jQuery || window.$ || $);

• version.json

{
  "version": "1.0"
}

---

在下实在是被缓存爆出翔了。
另外，在iOS8下，微信缓存真的很变态。怎么刷新都不更新，杀掉微信进程后，再打开微信，才会更新。
方案一和方案二，改变之后，都需要客户端刷新一次网页才行。目前来看，方案二 + 方案三 是比较好的。

---