HTML頁面緩存


引出問題:

在做完一個項目迭代上線的時候遇到一個問題:Ht代碼部署在nginx里面,當我打包的H5代碼上傳把之前代碼替換掉之后,如果手機端之前有打開過相關的頁面,那么在代碼上傳成功后再次打開,回出現一些js文件404(在PC上也是一樣)

 

分析問題:

H5代碼使用webpack打包之后會把所有的js文件按照規則命名

所以每次代碼有改動的話,打出的新包會和老包里面的js文件名稱不一樣;

那么回到開始的問題

為什么會出現404,那么一定是那些js文件被刪掉了,

怎么會被刪掉呢?因為上傳新包就把老包刪掉了;

那么新包都上傳了為什么還在請求老包的js呢?一定是頁面被緩存了;

 

解決問題:

一開始我能想到的辦法就是在HTML文件的head內寫一些meta標簽來禁止緩存,結果發現,沒有任何luan用;

於是我就查了下關於HTTP的工具書,得知:每次HTTP請求

都會先發送一個新鮮度檢測到server端,然后server端會告訴客戶端是否需要發送本次請求,

那怎么看最后到底請求了沒有呢,就看最終的HTTP狀態碼,如果是200說明請求了,如果狀態碼是304那就說明沒有請求,使用了本地緩存;

那么server端和client端是通過什么來進行新鮮度檢測呢?

主要是靠兩個東西:

Etag/if-none-match

Last-Modify/If-Modify-Sice

沒錯,我們的項目出現問題就是請求出現了304,HTML文件沒有通過HTTP的新鮮度檢測,所以走的緩存,那么這就好辦了;

我們直接來修改nginx配置文件,把HTML文件保持新鮮度

這樣一來每次請求都不會走緩存了,問題解決

 

補充:

那么,我們會想到,每次請求都不走緩存是不是太消耗服務器的帶寬了,給服務器帶來了壓力,從而提高了網絡費用啊,

是的這個問題是有一點,但是我也看了,我們打包之后的代碼只有一個HTML文件(VUE為SPA),而且這個文件很小

還不到1kb,所以我覺得可以暫時忽略這個問題;

另外,我也試了使用nginx的話,當我們有修改webServer下的HTML文件后,當我們再次請求該文件時,瀏覽器會自動拉去最新的代碼;

但是我們的項目為什么就不會呢?我想到我們的webServer是通過tomcat反向代理到nginx上面的,多以我就明白了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM