微信頁面入口檔案被快取解決方案
快取對於前端頁面來說，是加速頁面載入的利器之一，但也同時帶來了很多問題，比如新版本釋出之後，怎麼替換客戶端上的快取檔案呢？大家一般的的解決方案主要有以下幾種形式，
一般情況
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的meta設定依舊沒能生效。
方案一（部分框架無效）
最開始碰到這個問題，我在想是不是可以給入口檔案的html加一個版本號，比如
https://m.test.com/views/index?v=1538208193491
理論上來說，這樣應該是可以的，但發現沒有用。分析原因可能是vue+nginx的形式下，所有的路由都被try_files 解析到index.html
location / {
root/mnt/dat1/test/tes-app;
indexindex.html index.htm;
try_files $uri $uri/ /index.html;
}
這個解析的過程中版本號已經失效了，因此沒能達到替換快取的目的。至於其他的框架下，比如ftl、jsp那種模版編譯的有可能生效，不過需要大家自己去驗證了。
方案二（有效）
再換一種方案，更改伺服器配置，強制不快取入口檔案，其他靜態正常快取，比如在nginx中對靜態部分如下
location / {
root/mnt/dat1/test/tes-app;
indexindex.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、快取入口頁面和保留上次瀏覽位置是否有關聯呢？感覺關聯度也不是那麼大
這個問題如果大家有什麼好的想法，快來一起討論討論唄～～