使用clientCache快取靜態檔案

     針對Client端的靜態檔案(js、css、圖檔等),在第一次瀏覽器載入時會對Server發出Request來下載,而在第二次載入時,同樣會再發出一次Request來詢問,並依Client及Server檔案的修改時間來判斷是否需下載。因為只有回應標頭內容,不用下載檔案內容,所以在第2次載入會明顯比較快。
  若這些靜態檔案若都沒有在修改的話,在IIS7以上可以透過web.config直接設定快取的模式及過期時間,來快取在Client端,這樣第2次載入時連Request都不會發出。

增加clientCache組態-設定

在system.webServer/staticContent下加入設定,cacheControlMode設定為UseMaxAge,並設定對應的屬性cacheControlMaxAge來設定快取時效,
如下快取10秒
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00:00:10"/>

測試網頁-第1次載入:完整大小

image

測試網頁-第2次載入:from cache

image

回應標頭:cache-control:max-age=10

image

另一種設定快取的設cacheControlMode=UseExpires,並設定對應的屬性httpExpires,此為設定快取的絕對日期,如下設定2038年過期
<clientCache cacheControlMode="UseExpires" httpExpires="Tue, 19 Jan 2038 03:14:07 GMT" />

回應標頭:Expires:Tue, 19 Jan 2038 03:14:07 GMT

image

備註


1.在測試第2次後的載入,不要用重整網頁的方式,因為重整網頁是全部重新下載,無法透過cache取得。

2.若你的js、css是透過Bundle的方式,則預設會使用快取cacheControlMode=UseExpirescache的設定

參考文章


http://blog.miniasp.com/post/2009/04/12/How-to-setup-Client-side-Cache-in-IIS.aspx

http://www.iis.net/configreference/system.webserver/staticcontent/clientcache

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS