前端性能优化之Gzip压缩

如何进行配置

我这里是在服务端配置nginx进行压缩

我们只需要配置好nginx的配置文件 /etc/nginx/nginx.conf

http {
	#...其他配置

	##
	# Gzip Settings
	##
    
	##表示开启gzip压缩
	gzip on;

	 gzip_vary on;
    ##定义了应该压缩哪些类型的连接，这里是全部
	 gzip_proxied any;
    ##设置 Gzip 的压缩级别。压缩级别的值可以从 1 到 9
	 gzip_comp_level 6;
    ##设置用于压缩的缓冲区的大小和数量。这个指令设置了 16 个缓冲区，每个大小为 8 千字节
	 gzip_buffers 16 8k;
    ##定应该启用 Gzip 压缩的 HTTP 协议版本
	 gzip_http_version 1.1;
    ##指定应该被压缩的 MIME 类型
	 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

然后重新启动nginx就好

sudo systemctl restart nginx

压缩是否成功

如果压缩成功，你应该能够在响应头部中看到以下信息：

• Content-Encoding: gzip：这表示响应已经被压缩

配置好后，请先清除浏览器缓存再进行发起请求查看

在chrome中右键请求，再点击清除缓存就好

压缩效果

我们查看控制面板

在右边大小中，上面是在网络传输中的大小，下面是源文件大小