spa緩存問題nginx

1. 前端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緩存問題：