静态资源压缩-nginx缓存问题

如果图片过大压缩后模糊，建议使用图片分段形式展示；
1.人工压缩
Css/JS/IMG实现压缩地址：http://tool.oschina.net/jscompress/
2.Maven自动打包压缩 自动生成.min文件

<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.1.RELEASE</version>
	</parent>
	<dependencies>
		<!-- SpringBoot整合Web组件 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
	</dependencies>

	<!-- 构建相关配置 -->
	<build>
		<!-- maven插件配置 -->
		<plugins>
			<plugin>
				<!-- YUI Compressor Maven压缩插件 -->
				<groupId>net.alchim31.maven</groupId>
				<artifactId>yuicompressor-maven-plugin</artifactId>
				<version>1.3.0</version>
				<configuration>
					<!-- 读取js,css文件采用UTF-8编码 -->
					<encoding>UTF-8</encoding>
					<!-- 不显示js可能的错误 -->
					<jswarn>false</jswarn>
					<!-- 若存在已压缩的文件，会先对比源文件是否有改动。有改动便压缩，无改动就不压缩 -->
					<force>false</force>
					<!-- 在指定的列号后插入新行 -->
					<linebreakpos>-1</linebreakpos>
					<!-- 压缩之前先执行聚合文件操作 -->
					<preProcessAggregates>true</preProcessAggregates>
					<!-- 压缩后保存文件后缀 -->
					<suffix>.min</suffix>
					<!-- 源目录，即需压缩的根目录 -->
					<sourceDirectory>${basedir}/mobile</sourceDirectory>
					<!-- 压缩js和css文件 -->
					<includes>
						<include>**/*.js</include>
						<include>**/*.css</include>
					</includes>
					<!-- 以下目录和文件不会被压缩 -->
					<excludes>
						<exclude>**/*.min.js</exclude>
						<exclude>**/*.min.css</exclude>
						<exclude>scripts/data/*.js</exclude>
					</excludes>

				</configuration>
			</plugin>
		</plugins>
	</build>

3.Nginx自带压缩
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable “MSIE [1-6].”; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;

配置文件内容详细介绍
gzip配置的常用参数
gzip on|off; #是否开启gzip
gzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_disable #正则匹配UA 什么样的Uri不进行gzip
gzip_min_length 200 # 开始压缩的最小长度(再小就不要压缩了,意义不在)
gzip_http_version 1.0|1.1 # 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议)
gzip_proxied # 设置请求者代理服务器,该如何缓存内容
gzip_types text/plain application/xml # 对哪些类型的文件用压缩 如txt,xml,html ,css
gzip_vary on|off # 是否传输gzip压缩标志

可能一张图片 2兆
如果过大的过大的情况下，建议将一张大图拆分n多个小图加载；

如果我们现在对图片实现压缩，如果图片不清晰的话如何解决呢？
分段组装 10兆 分 n多个图片

8兆图片通过技术手段压缩成2兆看起非常模糊
当时腾讯课堂限制每张图片只能够有2兆
将图片分成多个 拼接组成成一张 也就是等于原生图片；

http协议304 缓存

客户端（浏览器）发送请求到服务器端 第一次请求的时候会缓存所有的静态资源到浏览器；
客户端发送第二次请求的时候 如果本地浏览器有缓存，就使用本地浏览器的；
Key：访问的url value：

如果远程的文件发生的变化的情况下，就使用远程的；

客户端缓存（浏览器缓存）→CDN缓存（七牛云缓存）→Nginx缓存
→JVM内置缓存 →Redis分布式缓存 →数据库

需要考虑问题：

Redis与数据库一致性问题 mq订阅binlog 同步数据一致性问题
JVM与Redis保持一致性问题
Nginx缓存与服务器端真实缓存一致问题



数据库表结构

代码



查询所有商品能不能缓存到nginx???
答案是只把详情页缓存到nginx,所有商品不缓存到nginx中！
nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    # 代理缓存配置
   proxy_cache_path "./meite_cachedata"  levels=1:2 keys_zone=meitecache:256m inactive=1d max_size=1000g; 


    server {
	
        listen       80;
        server_name  localhost;
		gzip on;
	    gzip_buffers 32 4K;
	    gzip_comp_level 6;
        gzip_min_length 100;
	    gzip_types application/javascript text/css text/xml;
        gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
        gzip_vary on;
		### 访问我们的商品详情页面 需要使用缓存
        location /details {
           #使用缓存名称
           proxy_cache meitecache;
		   #对以下状态码实现缓存
           proxy_cache_valid 200 206 304 301 302 1d;
		   #缓存的key
           proxy_cache_key $request_uri;
           add_header X-Cache-Status $upstream_cache_status;
           proxy_pass   http://127.0.0.1:8080;
           index  index.html index.htm;
        }
		###查询我们所有的商品列表 不需要缓存
	     location /all {
           proxy_pass   http://127.0.0.1:8080;
           index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        
    }

}

把服务停掉可以验证！