用whistle清除js和css快取

avenwu發表於2018-12-11
JSCSS快取

在開發除錯web頁面過程中，經常會被瀏覽器快取所困擾，導致一些靜態資源的請求無法得到實時更新，特別是手機APP的內嵌Webview頁面，經常找不到清除快取的入口，本文將介紹下如何利用whistle徹底解決這類問題。

whistle是基於Node實現的跨平臺web除錯代理工具，功能強大，基本上覆蓋了除錯代理工具可以做的任何事情，所有操作都可以通過配置實現，且支援外掛擴充套件，具體功能參見Github：github.com/avwo/whistl…

一般清除快取可以用以下三種方式：

  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和模板字串 實現：

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

不同頁面對應的正則替換 可能不一樣，根據自己頁面靜態資源連結特點及resReplace文件設定。

whistle配置
修改請求和響應頭
效果

最後，回顧下用whistle清除頁面靜態資源快取的方式：

  1. 禁用頁面 304 及快取頭：disable://cache
  2. 通過正則替換給頁面裡面的靜態資源連結加隨機引數：resReplace

相關文章