用whistle清除js和css缓存
发布于 5 年前 作者 avwo 2916 次浏览 来自 分享

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

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

一般清除缓存可以用以下三种方式：

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

客户端禁用缓存

Chrome浏览器可以通过打开开发者工具，并勾选Network菜单里面的Disable cache 实现禁用当前页面的缓存： 禁用Chrome浏览器缓存 注意：勾选后开发者工具也要一直保持打开状态，否则没有效果

这种方式只有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和模板字符串 实现：

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

不同页面对应的正则替换 可能不一样，根据自己页面静态资源链接特点及resReplace文档设置。

whistle配置 修改请求和响应头 效果

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

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