用whistle清除js和css缓存

在开发调试web页面过程当中，常常会被浏览器缓存所困扰，致使一些静态资源的请求没法获得实时更新，特别是手机APP的内嵌Webview页面，常常找不到清除缓存的入口，本文将介绍下如何利用whistle完全解决这类问题。

whistle是基于Node实现的跨平台web调试代理工具，功能强大，基本上覆盖了调试代理工具能够作的任何事情，全部操做均可以经过配置实现，且支持插件扩展，具体功能参见Github：github.com/avwo/whistl…

通常清除缓存能够用如下三种方式：

1. 客户端(浏览器)禁用缓存
2. 经过修改请求和响应头
3. 经过给请求URL加随机参数

客户端禁用缓存

Chrome浏览器能够经过打开开发者工具，并勾选Network菜单里面的Disable cache 实现禁用当前页面的缓存：

注意：勾选后开发者工具也要一直保持打开状态，不然没有效果

这种方式只有Chrome和Firefox等一些浏览器支持，大多数普通客户端和手机APP里面的WebView不支持，更通用的方式是利用调试代理工具实现后面的两种方式。

修改请求和响应头

修改请求头是经过删除及设置一些缓存相关的字段，包括：

1. 删除 If-Modified-Since
2. 删除 Last-Modified
3. 删除 Etag
4. 设置 Pragma=no-cache
5. 设置 Cache-Control=no-cache

修改这些字段后，让Server没法判断该请求是否有缓存，确保返回完整内容给客户端，而不是 304； 服务端再把响应头设置成不缓存便可，这样确保后续该请求能够继续发送出来，而不是直接读取客户端或浏览器的缓存，响应头的缓存配置主要涉及如下字段：

1. 设置 Cache-Control=no-store
2. 设置 Expires=${new Date(Date.now() - 60000000).toGMTString()}
3. 设置 Pragma=no-cache

上述操做在whistle中只需对指定请求配置一条规则便可：

www.baidu.com/index.html disable://cache
复制代码

经过给请求URL加随机参数

大多数html页面考虑到实时更新的问题，通常不会设置长缓存，更多的是采用Server端响应 304 的方式，而不少cdn上的静态资源如js、css、图片等静态资源通常都设置了长缓存，致使这些请求根本不会发出来，因此只是经过设置请求及响应头没法完全解决缓存问题，解决这种长缓存的资源能够给对应请求的url加随机参数。

用whistle给页面的里面的js、css加随机参数，能够用resReplace和模板字符串 实现：

``` test.json
/\.(js|css)(['"])/g: .$1?test=${now}$2
```
www.baidu.com/index.html disable://cache resReplace://`{test.json}`
复制代码

不一样页面对应的正则替换 可能不同，根据本身页面静态资源连接特色及resReplace文档设置。

最后，回顾下用whistle清除页面静态资源缓存的方式：

1. 禁用页面 304 及缓存头：disable://cache
2. 经过正则替换给页面里面的静态资源连接加随机参数：resReplace