国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

qpwoeiru96 / 2797人閱讀

摘要:方案一部分框架無效最開始碰到這個(gè)問題,我在想是不是可以給入口文件的加一個(gè)版本號,比如理論上來說,這樣應(yīng)該是可以的,但發(fā)現(xiàn)沒有用。分析原因可能是的形式下,所有的路由都被解析到這個(gè)解析的過程中版本號已經(jīng)失效了,因此沒能達(dá)到替換緩存的目的。

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

一般情況

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

</>復(fù)制代碼

2、文件名使用hash形式,webpack中打包文件可直接生成,這樣每次打包發(fā)布的時(shí)候都會產(chǎn)生新的hash值,區(qū)別于原有的緩存文件

</>復(fù)制代碼

3、服務(wù)器及緩存頭設(shè)置,不使用緩存,如

</>復(fù)制代碼

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

4、在html的meta標(biāo)簽添加緩存設(shè)置

</>復(fù)制代碼

微(keng)信(die)瀏覽器

微信瀏覽器下比較特殊,這個(gè)bug一樣的存在居然把入口文件html給緩存下來了,這就意味著通過版本號和hash號的形式避免緩存的方案失效了。同時(shí)html的meta設(shè)置依舊沒能生效。

方案一(部分框架無效)

最開始碰到這個(gè)問題,我在想是不是可以給入口文件的html加一個(gè)版本號,比如

</>復(fù)制代碼

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

理論上來說,這樣應(yīng)該是可以的,但發(fā)現(xiàn)沒有用。分析原因可能是vue+nginx的形式下,所有的路由都被try_files解析到index.html

</>復(fù)制代碼

  1. location / {
  2. root /mnt/dat1/test/tes-app;
  3. index index.html index.htm;
  4. try_files $uri $uri/ /index.html;
  5. }

這個(gè)解析的過程中版本號已經(jīng)失效了,因此沒能達(dá)到替換緩存的目的。至于其他的框架下,比如ftl、jsp那種模版編譯的有可能生效,不過需要大家自己去驗(yàn)證了。

方案二(有效)

再換一種方案,更改服務(wù)器配置,強(qiáng)制不緩存入口文件,其他靜態(tài)正常緩存,比如在nginx中對靜態(tài)部分如下

</>復(fù)制代碼

  1. location / {
  2. root /mnt/dat1/test/tes-app;
  3. index index.html index.htm;
  4. try_files $uri $uri/ /index.html;
  5. #### kill cache
  6. add_header Last-Modified $date_gmt;
  7. add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
  8. if_modified_since off;
  9. expires off;
  10. etag off;
  11. }
  12. location ~* ^.+.(jpg|jpeg|gif|png|ico|css|js)$ {
  13. root /mnt/dat1/test/tes-app;
  14. access_log off;
  15. expires 30d;
  16. }

最終經(jīng)過測試,這種方式可以解決微信下入口文件被緩存的問題,問題解決~~

題外話

說到這里,微信瀏覽器為什么要緩存html文件呢?
1、難道也是加速頁面加載?并不見得是這個(gè)原因,因?yàn)檫@可能帶來的問題大于帶來的優(yōu)化效果。
2、緩存入口頁面和保留上次瀏覽位置是否有關(guān)聯(lián)呢?感覺關(guān)聯(lián)度也不是那么大
這個(gè)問題如果大家有什么好的想法,快來一起討論討論唄~~

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/62026.html

相關(guān)文章

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

    摘要:方案一部分框架無效最開始碰到這個(gè)問題,我在想是不是可以給入口文件的加一個(gè)版本號,比如理論上來說,這樣應(yīng)該是可以的,但發(fā)現(xiàn)沒有用。分析原因可能是的形式下,所有的路由都被解析到這個(gè)解析的過程中版本號已經(jīng)失效了,因此沒能達(dá)到替換緩存的目的。 緩存對于前端頁面來說,是加速頁面加載的利器之一,但也同時(shí)帶來了很多問題,比如新版本發(fā)布之后,怎么替換客戶端上的緩存文件呢?大家一般的的解決方案主要有以下...

    wuyumin 評論0 收藏0
  • 微信Webapp開發(fā)的各種變態(tài)路由需求及解決辦法!

    摘要:前言最近在使用開發(fā)的一個(gè)小商城項(xiàng)目在微信上遇到一些坑及變態(tài)需求層層深入整理一下給后來人參考一定有你還不知道的調(diào)試緩存問題描述微信打開的頁面默認(rèn)是會緩存的這是為了加載更快本來是好事但對于用來調(diào)試的我們就比較痛苦了每每更改一些刷新以后怎么樣都去 前言 最近在使用BUI Webapp開發(fā)的一個(gè)小商城項(xiàng)目在微信上遇到一些坑及變態(tài)需求, 層層深入, 整理一下給后來人參考. 一定有你還不知道的! ...

    laoLiueizo 評論0 收藏0
  • uni-app 創(chuàng)建的第一個(gè)應(yīng)用

    摘要:體驗(yàn)并不好在中,有這個(gè)例子,參考使用即可做出類似微信通訊錄的頁面。啟動頁計(jì)劃是不顯示導(dǎo)航欄的,為了跳過啟動頁,添加了一個(gè)跳過按鈕。 本人微信公眾號:前端修煉之路,歡迎關(guān)注 背景介紹 經(jīng)過上一篇文章uni-app官方教程學(xué)習(xí)手記的學(xué)習(xí)之后,我就著手做這個(gè)項(xiàng)目了。 目前已經(jīng)初步搭出了整體的框架,秉著取之于社會,回饋于社會的原則,我將這個(gè)項(xiàng)目開源到GitHub uni-shop,發(fā)展壯大un...

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<