要解决问题，有先决的理论知识先要了解
分两种：
这种机制下，浏览器会先找本地缓存，命中则不会从服务器请求，并返回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了。