快取對於前端頁面來說，是加速頁面載入的利器之一，但也同時帶來了很多問題，比如新版本釋出之後，怎麼替換客戶端上的快取檔案呢？大家一般的的解決方案主要有以下幾種形式，

一般情況

1、新增版本號，在靜態資原始檔的引用連結後面新增版本號，這樣每次釋出的時候更新版本號，就能讓叫客戶端載入新的資原始檔，避免再次使用快取的老檔案，如

<script src="//m.test.com/build/activity/js/commons.js?v=20170608"></script>

2、檔名使用hash形式，webpack中打包檔案可直接生成，這樣每次打包釋出的時候都會產生新的hash值，區別於原有的快取檔案

<script src="//m.test.com/build/activity/js/activity/201807/schoolbeauty/main.19315e5.js"></script>

3、伺服器及快取頭設定，不使用快取，如

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
    root   /mnt/dat1/test/tes-app;
    #### kill cache
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}   
 

4、在html的meta標籤新增快取設定

<!-- cache control: no cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

微（keng）信（die）瀏覽器

微信瀏覽器下比較特殊，這個bug一樣的存在居然把入口檔案html給快取下來了，這就意味著通過版本號和hash號

方案一（部分框架無效）

最開始碰到這個問題，我在想是不是可以給入口檔案的html加一個版本號，比如

https://m.test.com/views/index?v=1538208193491

理論上來說，這樣應該是可以的，但發現沒有用。分析原因可能是vue+nginx的形式下，所有的路由都被try_files解析到index.html

location / {
    root   /mnt/dat1/test/tes-app;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

這個解析的過程中版本號已經失效了，因此沒能達到替換快取的目的。至於其他的框架下，比如ftl、jsp那種模版編譯的有可能生效，不過需要大家自己去驗證了。

方案二（有效）

再換一種方案，更改伺服器配置，強制不快取入口檔案，其他靜態正常快取，比如在nginx中對靜態部分如下

location / {
    root   /mnt/dat1/test/tes-app;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    #### kill cache
    add_header Last-Modified $date_gmt;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
    if_modified_since off;
    expires off;
    etag off;
}

location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js)$ {
    root   /mnt/dat1/test/tes-app;
    access_log off;
    expires 30d;
}  

最終經過測試，這種方式可以解決微信下入口檔案被快取的問題，問題解決～～

題外話

說到這裡，微信瀏覽器為什麼要快取html檔案呢？ 1、難道也是加速頁面載入？並不見得是這個原因，因為這可能帶來的問題大於帶來的優化效果。 2、快取入口頁面和保留上次瀏覽位置是否有關聯呢？感覺關聯度也不是那麼大 這個問題如果大家有什麼好的想法，快來一起討論討論唄～～