緩存對于前端頁面來說，是加速頁面加載的利器之一，但也同時帶來了很多問題，比如新版本發布之后，怎么替換客戶端上的緩存文件呢？大家一般的的解決方案主要有以下幾種形式，

一般情況

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

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

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標簽添加緩存設置

微(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文件呢？

1、難道也是加速頁面加載？并不見得是這個原因，因為這可能帶來的問題大于帶來的優化效果。

2、緩存入口頁面和保留上次瀏覽位置是否有關聯呢？感覺關聯度也不是那么大

這個問題如果大家有什么好的想法，快來一起討論討論唄～～

總結

以上是生活随笔為你收集整理的php微信页面缓存数据,微信页面入口文件被缓存解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。