阿里云
阿里云多端小程序中小企业获客首选
发表主题 回复主题
  • 7969阅读
  • 1回复

[解决方案]Nginx开启Gzip压缩提升页面加载速度

级别: 论坛版主
发帖
3414
云币
8980

阿里云Linux下安装Nginx服务器基础篇 gC qQ~lWZ  
阿里云linux下Nginx整合Tomcat实现负载均衡集群 $1$T2'C~+  
阿里云Linux下Nginx服务器整合php F"M$ "rC]  
阿里云Nginx整合Tomcat实现静态文件缓存 FI$#x%A  
Nginx如何使用ngx_cache_purge清除缓存 >ey- j\_v  
y3vm+tJc{  
oPA [vY  
Y2,\WKa  
以上都是工作中的记录。 j,/t<@S>  
====================================== XUyoZl?  
t,yzqn  
最近使用 echarts绘图,需要加载echarts-all.js,源码文件居然高达900KB,执行时间为3.75秒,严重影响了页面加载速度。 @0>3))  
项目环境  linux,Nginx w+0Ch1$  
还好Nginx 内置了Gizp 压缩。 GxIw4m9  
一、压缩效果 Z/ypWoV(  
echarts-all.js   压缩前 900KB  压缩后 375KB,时间差距 3.75秒 缩短到  1.58秒, 大大减少了网络传输速度,当然会对服务器CPU有一定影响。 Qb;5:U/x  
同时开启对  css  xml  以及部分图片格式进行压缩处理。 `b{.K,  
压缩前: 0w_2E  
%g>{m2o  
'Na/AcRdg  
压缩后: > WW5A py[  
mxRe2<W  
+i[w& P  
:tA|g  
Q4;br ?2H  
;#$zHR  
二、实现方式 Dg LSDKO!  
?Ze3t5Ll  
Z)U#5|sf  
1、Vi打开Nginx配置文件 ] PnE%  
vi /usr/local/nginx/conf/nginx.conf LEJ7.82  
"p\XaClpz  
@Yq!  
2、找到如下一段,进行修改 cg,_nG]i  
gzip on; 6L6Lk  
gzip_min_length 1k; 3o'SY@'W  
gzip_buffers 4 16k; `f:5w^A  
gzip_http_version 1.0; N[$(y} !s  
gzip_comp_level 2; '7F`qL\/#(  
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 7<=7RPWmD  
gzip_vary off; hfvs' .  
gzip_disable "MSIE [1-6]\."; Oed&B  
以上代码可以插入到 http {...}整个服务器配置里,也可以插入到虚拟主机的 server {...}或者下面的location模块内。 B%Yb+M&K  
|yI?}zyR  
VmTk4?V4  
3、解释一下 J<_&f_K0]  
gzip (D8'qx-M  
决定是否开启gzip模块 ?.A6HrAPB  
example:gzip on; U[S;5xeF.j  
gzip_buffers ,>(M5\Z/c  
设置gzip申请内存的大小,其作用是按块大小的倍数申请内存空间 gzDb~UEoF  
param2:int(k) 后面单位是k RWBmQg^]X  
example: gzip_buffers 4 8k; +V |]:{3W  
gzip_comp_level ej<z]{`05  
设置gzip压缩等级,等级越底压缩速度越快文件压缩比越小,反之速度越慢文件压缩比越大 &V( LeSI  
param:1-9 $zCUQthL@  
example:gzip_com_level 1; HIh oYSwB  
gzip_min_length j7-#">YL  
当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时,所有页面都进行压缩 ;T52 aX  
param:int ]Wa,a T'  
example:gzip_min_length 1000; '~ ]b;nA  
gzip_http_version :OI!YR%"  
用于识别http协议的版本,早期的浏览器不支持gzip压缩,用户会看到乱码,所以为了支持前期版本加了此选项,目前此项基本可以忽略 6}ax~wYct  
param: 1.0|1.1 I )B2Z(<Q  
example:gzip_http_version 1.0 0t4i'??  
gzip_proxied Q}2w~Cn\S  
Nginx做为反向代理的时候启用, db%`- UST  
param : off|expired|no-cache|no-sotre|private|no_last_modified|no_etag|auth|any] m@c2'*&Y  
expample:gzip_proxied no-cache; SwP h-6  
off – 关闭所有的代理结果数据压缩 2N,*S   
expired – 启用压缩,如果header中包含”Expires”头信息 Pq4sv`q)S  
no-cache – 启用压缩,如果header中包含”Cache-Control:no-cache”头信息 d&'6l"${  
no-store – 启用压缩,如果header中包含”Cache-Control:no-store”头信息 kD; BwU[  
private – 启用压缩,如果header中包含”Cache-Control:private”头信息 %)aDh }  
no_last_modified – 启用压缩,如果header中包含”Last_Modified”头信息 jA]xpf6}  
no_etag – 启用压缩,如果header中包含“ETag”头信息 AARhGx|L<  
auth – 启用压缩,如果header中包含“Authorization”头信息 !E7/:t4  
any – 无条件压缩所有结果数据 `aI%laj&M  
gzip_types sU}e78mh  
设置需要压缩的MIME类型,非设置值不进行压缩 $K G?d>wx  
param:text/html|application/javascript|text/css|application/xml fg1 zT~  
example:gzip_types text/html; /cjf 1Dc  
对于多数以文本为主的站点来说,文本身内容占流量的绝大部分。虽然单个文本体积并不算大,但是如果数量众多的话,流量还是相当可观。启用GZIP以后,可以大幅度减少所需的流量(如上图所示,本站首页大小从28K压缩到了7K)。以下是以nginx服务器为例开启gzip的一般代码。 7I.[1V`  
gzip_vary Lq&xlW j  
跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding",我不需要这玩意,自己对照情况看着办吧 G/`_$ c  
gzip_disable W@0(Y9jdg  
IE6对Gzip不怎么友好,不给它Gzip了 ,,iQG' *  
A=3 U4L  
4、:wq保存退出,重新加载Nginx igQyn|  
/usr/local/nginx/sbin/nginx -s reload %Mu dc  
)i>KYg w  
<=`@`rm{  
[ 此帖被小柒2012在2016-05-26 10:29重新编辑 ]
级别: 新人
发帖
6
云币
8
只看该作者 沙发  发表于: 2016-06-05
ReNginx开启Gzip压缩提升页面加载速度
谢谢分享,回头试试去
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)