當前位置:首頁 » 網頁前端 » webspa
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

webspa

發布時間: 2023-08-11 18:07:01

前端SPA應用緩存問題解決與實踐

要解決問題,有先決的理論知識先要了解

分兩種:

這種機制下,瀏覽器會先找本地緩存,命中則不會從伺服器請求,並返回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緩存問題: