前言
使用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压缩前
开启服务器gzip压缩后