微信頁面入口文件被緩存解決方案

緩存對於前端頁面來講，是加速頁面加載的利器之一，但也同時帶來了不少問題，好比新版本發佈以後，怎麼替換客戶端上的緩存文件呢？你們通常的的解決方案主要有如下幾種形式，

通常狀況

一、添加版本號，在靜態資源文件的引用連接後面添加版本號，這樣每次發佈的時候更新版本號，就能讓叫客戶端加載新的資源文件，避免再次使用緩存的老文件，如

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

二、文件名使用hash形式，webpack中打包文件可直接生成，這樣每次打包發佈的時候都會產生新的hash值，區別於原有的緩存文件

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

三、服務器及緩存頭設置，不使用緩存，如

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;
}

四、在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;
    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文件呢？一、難道也是加速頁面加載？並不見得是這個緣由，由於這可能帶來的問題大於帶來的優化效果。二、緩存入口頁面和保留上次瀏覽位置是否有關聯呢？感受關聯度也不是那麼大這個問題若是你們有什麼好的想法，快來一塊兒討論討論唄～～