教你如何nginx服务器开启gzip压缩

前言

使用lighthouse检测网页后,发现提示我需要进行资源压缩

Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes

明明我前端代码已经压缩了啊,查询相关文档后发现说的是服务端gzip压缩
查询网站是否用gizp压缩

一、什么是Gzip

Gzip 是一种压缩算法,在网络传输中使用非常普遍。

需要注意的是,Gzip 压缩仅对于文本类型的资源有明显提示,压缩后的体积大约是压缩前的 1/3。

但是对于图片,音视频等媒体资源,本身就采用了有损压缩,所以再使用 gzip 并不能得到很大提升,有时候反而会适得其反。

二、前端项目如何配置开启Gzip

前端项目,打包出的 js,css资源,非常适合使用 gzip 进行压缩。

这样,用户浏览器收到服务器返回的 gzip 类型资源时,会自动解压缩。这样,既能减少带宽的损耗,也能加快资源传输的时间。

以nginx为例子,你需要会一些nginx配置以及linux命令

具体配置如下
登录服务器在nginx.conf添加gzip配置
一般是在http里面加,也可以在某个server里加
打开本项目的前端服务器配置文件,比如 nginx.conf文件

http {
	gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;
}

配置项释义:

  # 开启服务器实时gzip
  gzip on;
  # 开启静态gz文件返回, 例如 /dist 文件夹的gz文件,其他的是实时压缩
  gzip_static on;
  # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
  gzip_min_length 1k;
  # 设置压缩所需要的缓冲区大小
  gzip_buffers 32 4k;
  # 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;
  # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
  gzip_comp_level 7;
  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  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 application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
  # 是否在http header中添加Vary: Accept-Encoding,建议开启
  gzip_vary on;
  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

三、处理报错

一般配置完了,重启nginx服务会报错,是nginx安装的时候缺少相应配置,这个时候需要安装
unknown directive "gzip_static" in /usr/local/nginx/conf/nginx.conf:35

具体操作

打开nginx安装目录,如果不知道nginx 安装在哪,使用 find / -name nginx

cd /nginx-1.8.0

添加相应配置(除gzip_static配置外,其他配置均为通过nginx -V查看显示的之前既有配置)

./configure  --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module

编译

make
make install

安装结束后,停掉nginx服务,重新启动,重新测试一下网页飞快启动!

打gzip测试网开始测试吧 https://tool.chinaz.com/gzips
开启gzip压缩前
教你如何nginx服务器开启gzip压缩_第1张图片

开启服务器gzip压缩后
教你如何nginx服务器开启gzip压缩_第2张图片

你可能感兴趣的:(性能优化,前端)