用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