Nginx配置浏览器缓存

了解：

缓存的种类

• memory cache（内存缓存）
• disk cache（硬盘缓存）

一、强缓存：只要访问过该url，再次访问时，不再向服务器发送请求，直接从缓存中请求资源。

涉及两个响应头配置：

1. <- cache-control: max-age=600 或者 设置为 ---- no-store (不缓存) no-cache （不使用强缓存）

http1.1以后增加的，max-age设置的强缓存的过期时间，600表示600毫秒。

2. <- expires: Mon,4 Sep 2021 09:02:20 GMT

http1.0以后增加的，

以上当两者同时存在时，cache-control起作用。

一般不希望强缓存的是：index.html或者所有的html文件。
可强缓存的是：js、css，因为每次打包后，都会有个随机数，如果变化一定会重新发生请求。

二、协商缓存：第一次访问时，也会进行缓存，但再次访问时，均会向服务器发送请求，询问是否发生变化，服务器会返回code表示是否发生了变化，例如 若304则无变化，若200则服务器会将新的内容发送过来，浏览器再次进行缓存。

涉及两个响应头配置（1和3）及两个请求头配置（2和4）：

1. <- last-modified: Fri, 07 Aug 2021 02:35:59 GMT
2. -> if-modified-since: Fri,07 Aug 2021 02:35:59 GMT

通过时间判断
第一次请求服务器时，服务器会返回给浏览器该文件最近一次修改的时间，及内容。
当再次请求服务器时，会通过上面带上改缓存文件的上一次修改的时间，服务器收到后，会根据这个修改时间 判断是否变化了，若无变化，服务器返回304，直接读取缓存即可。

3. <- etag: W/“512cbe0f-2382”
4. -> if-none-match: W/“5f2cbe0f-2382”

通过hash值判断
etag这一对儿与上面类似，只是后面跟着的是hash值，是一个唯一标志。过程与上面一样。

对比两种判断方式，当通过时间判断时，文件有可能修改的时间发生了变化，但是文件的内容并没有发生变化；当通过hash值判断时，只要hash值变化了，文件的内容就一定发生了变化。

Nginx相关配置方式

可以使用scp命令，将服务器中的文件下载到本地，修改后，再使用scp进行上传即可。scp 从服务器（用户名@域名:文件地址）/本地 到本地/服务器（用户名@域名:文件地址）
记得每次修改配置文件后，需要重启nginx。nginx -s reload

以下均是修改nginx.conf配置文件中的某一模块内容。

1、配置gzip（进行文件压缩）和etag（协议缓存）

http {
	# 开启gzip
	gzip on;
	#启用gzip压缩的最小文件：小于设置值的文件将不会被压缩
	gzip_min_length 1k;
	#gzip 压缩级别 1-10
	gzip_comp_level 2;
	#进行压缩的文件类型
	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	#是否在http header中添加Vary: Accept-Encoding（表示服务器支持压缩），建议开启
	gzip_vary on;
	
	#开启etag，默认也是开启状态
	etag on;
}

2、配置强缓存

server {
	#使用location进行正则匹配文件名称，针对特定的文件进行不同的强缓存设置
	#匹配html文件
	location ~* \.(html)$ {
		#关闭打印日志
		access_log off;
		#配置为不进行强缓存
		add_header Cache-Control max-age=no-cache;
	}
	
	location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
		access_log off;
		#配置为强缓存时长是360000毫秒
		add_header Cache-Control max-age=360000;
	}
}