要解決問題,有先決的理論知識先要了解
分兩種:
這種機制下,瀏覽器會先找本地緩存,命中則不會從伺服器請求,並返回200狀態碼,且附有 disk cache 或者 memory cache 字樣
這種機制,強緩存失效後,瀏覽器物培會攜帶緩存標識向伺服器發起請求,伺服器根據標識決定是否使用緩存
首先一點,就是 「瀏覽器會攜帶緩存標識」 ,這個標識是什麼,有兩種
好,原理講了,現在凡是用到nginx的罩寬唯,基本上自動都會實現了ETag和Last-Modified,也就是說,這部分實現機制,已經是默認的!不需要你另加處理。
好,問題來了,如何處理前端SPA應用的緩存問題呢?
現在的SPA要麼Vue要麼React要麼Angular
默認情況下,我們會看到:
即所有資源第一次進,強緩存,第二次進,無意外情況下,會執行協商緩存。
之所以會出現SPA緩存問題,在於index.html是304,那麼客戶端讀取到的,有可能是本地的Not Modified,那麼繼續下去,讀的依舊是本地的disk cache
如何解決問題呢?
這里有個特性,SPA通過webpack打包,一般默認會帶有contenthash值,即當對應文件有改動,這個contenthash值才會改變,進而改變打包出來巧賀的文件名,意味著 只有改變了的文件,文件名才會變,沒有改變的文件是不會變的
如果需要對特殊的文件特殊處理,比如文字類型的文件設置更大的緩存時間或者別的,可以參考上述語法單獨加映射
修改後, service nginx reload 一下,瀏覽器可以看到差別:
index.html一直是200,且從伺服器直接讀取,而所有其他的靜態文件,均從memory or disk cache讀取
好,那麼接下來如果有更新,可以想像,變化的文件有
而由於index.html一直是請求伺服器的,那麼得到的入口js也必然是最新的,意味著如果沒改動的,走本地強緩存,有改動的,會請求最新的,之後請求會走本地強緩存。
Problem solved.
解決前端SPA緩存問題: