要解決問題，有先決的理論知識先要了解
分兩種：
這種機制下，瀏覽器會先找本地緩存，命中則不會從伺服器請求，並返回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緩存問題：
❷ Nginx緩存設置教程
| 這篇文章主要介紹了Nginx緩存設置案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下 |
在開發調試web的時候，經常會碰到因瀏覽器緩存(cache)而經常要去清空緩存或者強制刷新來測試的煩惱，提供下apache不緩存配置和nginx不緩存配置的設置。在常用的緩存設置裡面有兩種方式，都是使用add_header來設置：分別為Cache-Control和Pragma。
對於站點中不經常修改的靜態內容（如圖片，JS，CSS），可以在伺服器中設置expires過期時間，控制瀏覽器緩存，達到有效減小帶寬流量，降低伺服器壓力的目的。
以Nginx伺服器為例：
【背景】：Expires是Web伺服器響應消息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
【相關資料】
1、Cache-control策略
Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據還是重新發請求到伺服器取數據。只不過Cache-Control的選擇更多，設置更細致，如果同時設置的話，其優先順序高於Expires。
http協議頭Cache-Control ：
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
各個消息中的指令含義如下：
Last-Modified/If-Modified-Since
其最終達到的就是等效於設置這三類html緩存技術：
❸ 怎麼關閉Nginx 的緩存
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css)$ {
#禁止緩存，每次都從伺服器請求
add_header Cache-Control no-store;
}
❹ nginx 緩存機制
Nginx緩存的基本思路
基本思想是利用客戶訪問的時間局部性原理，對客戶已經訪問過的內容在Nginx伺服器本地建立副本，這樣在一段時間內再次訪問該數據，就不需要通過Nginx伺服器再次向後端伺服器發出請求，所以能夠減少Nginx伺服器與後端伺服器之間的網路流量，減輕網路擁塞，同時還能減小數據傳輸延遲，提高用戶訪問速度。同時，當後端伺服器宕機時，Nginx伺服器上的副本資源還能夠回應相關的用戶請求，這樣能夠提高後端伺服器的魯棒性。
對於緩存，我們大概會有以下問題：
（1）緩存文件放在哪兒？
（2）緩存的空間大小是否可以限定?
（3）如何指定哪些請求被緩存？
（4）緩存的有效期是多久？
（5）對於某些請求，是否可以不走緩存？
解決這些問題後，nginx的緩存也就基本配置完成了，下面看詳細配置過程
開啟緩存
要使用緩存，首先要使用 proxy_cache_path 這個指令（必須放在 http 上下文的頂層位置），然後在目標上下文中使用 proxy_cache 指令
配置示例
proxy_cache_path 有兩個必填參數，第一個參數為 緩存目錄，第二個參數keys_zone指定緩存名稱和佔用內存空間的大小（註：示例中的10m是對內存中緩存內容元數據信息大小的限制，如果想限制緩存總量大小，需要用 max_size 參數）
proxy_cache 的參數為之前指定的緩存名稱
緩存管理的相關進程
在緩存工作中有兩個附加進程：
（1）緩存管理器
定期檢查緩存狀態，看緩存總量是否超出限制，如果超出，就移除其中最少使用的部分
（2）緩存載入器
載入器只在nginx啟動後運行一次，把緩存內容的元數據信息載入到內存空間，如果一次性載入全部緩存信息，會大量消耗資源，使nginx在啟動後的幾分鍾里變慢，為避免此問題，有3種載入策略：
loader_threshold – 指定每次載入執行的時間
loader_files – 每次最多載入的數量
loader_sleeps – 每次載入的延時
例如：
proxy_cache_path /data/nginx/cache keys_zone=one:10m loader_threshold=300 loader_files=200;
指定緩存哪些請求
nginx默認會緩存所有 get 和 head 方法的請求結果，緩存的key默認使用請求字元串
（1）自定義key
例如 proxy_cache_key " request_uri cookie_nocache arg_comment;
如果任何一個參數值不為空，或者不等於0，nginx就不會查找緩存，直接進行代理轉發
綜合示例
nginx 緩存機制
三分鍾看懂Nginx伺服器的緩存原理和機制
❺ Nginx作為緩存服務
上一篇文章講了Nginx作為代理服務的使用方式，這篇文章我們講一講Nginx作為緩存服務是怎麼工作的，以及實戰的使用。
先看一張圖：
面對第一次客戶端的應用Nginx需要從後端的服務獲取數據，對於後續的請求，Nginx若進行了緩存就不再從後端服務獲取數據。
語法：proxy_cache_path path [levels=levels].只能用在http中。
proxy_cache zone | off。默認是關閉的，可以用在http,server,location中。
訪問zzm這個路徑的時候，會返回配置文件中的spring.s項，具體值可以參考我們的啟動設置：
三個後台金正分別對應6000埠，6001埠，6002埠
所以我們訪問ip:port/zzm的時候會自動去訪問後台
我們首先注釋掉proxy_cache zzm_cache;進行訪問，也就是沒有緩存的情況下，訪問3次：
我們可以看到沒有緩存的情況下，會進行輪詢訪問，每次訪問的結果不一樣，而且我們的緩存路徑什麼都沒有，讓我想起了一首歌空空如也：
好奇的看了下目錄下的文件內容：
add_header Nging-Cache "$upstream_cache_status";
當我們沒有緩存的時候，我們可以看到應答會是MISS：
現在nginx.conf中加入新的配置項：
此時我們怒刷前端頁面，會發現後端日誌如下：
Nginx的緩存服務就講到這里，歡迎大家指正
❻ nginx如何設置不使用緩存
在開發調試web的時候，經常會碰到因瀏覽器緩存(cache)而經常要去清空緩存或者強制刷新來測試的煩惱，提供下apache不緩存配置和nginx不緩存配置的設置。
apache：
首先確定配置文件httpd.conf中確已經載入mod_headers模塊。
LoadMole headers_mole moles/mod_headers.so
我們可以根據文件類型來讓瀏覽器每次都從伺服器讀取，這里測試用css、js、swf、php、html、htm這幾種文件。
<FilesMatch 「\.(css|js|swf|php|htm|html)$」>
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>
nginx:
location ~ .*\.(css|js|swf|php|htm|html )$ {
add_header Cache-Control no-store;
}
對於站點中不經常修改的靜態內容（如圖片，JS，CSS），可以在伺服器中設置expires過期時間，控制瀏覽器緩存，達到有效減小帶寬流量，降低伺服器壓力的目的。
以Nginx伺服器為例：
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
#過期時間為30天，
#圖片文件不怎麼更新，過期可以設大一點，
#如果頻繁更新，則可以設置得小一點。
expires 30d;
}
location ~ .*\.(js|css)$ {
expires 10d;
}
❼ nginx 緩存JS一小時，請問如何更新緩存
這個緩存是指你瀏覽器（客戶端，非nginx）緩存，一般情況下，Ctrl+R強制刷新就會去掉緩存。
或者清除你的瀏覽器緩存就OK了。