Node.js服务器开启Gzip压缩教程


Posted in Javascript onAugust 11, 2017

Gzip是什么

复制大神们的解释吧:

GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了,效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的.

Gzip压缩率

举个例子,通过webpack打包后的js文件比较大,虽然我们可以利用chunk功能将文件分开混淆打包,但是总体积还是不小;这时候看看利用gzip压缩的效果:

Node.js服务器开启Gzip压缩教程

启用Gzip前

Node.js服务器开启Gzip压缩教程

启用Gzip后

对比其中三个文件前后压缩大小:

文本类文件:

iview.min.js: 429kb -> 109kb,压缩比74.6% base.min.js: 309kb -> 81.7kb,压缩比73.56% style.min.css: 207kb -> 30.9kb,压缩比85%

图片:

图片1: 63.2kb -> 63.2kb,压缩比0%?

我们看到文本类文件的压缩效果非常显著,但是图片体积没变。看一下文本类的http响应头是有gzip压缩过:

Node.js服务器开启Gzip压缩教程

而图片的没有:

Node.js服务器开启Gzip压缩教程

这是因为一般对于图片(png,jpg等)使用gzip的效果不好甚至恰得其反,所以一般都默认对图片不进行gzip压缩。

node.js启用gzip

下面说一下node的express框架如何使用gzip:

1.安装一个compression依赖:

npm install compression

2.调用:

var compression = require('compression')
var app = express();

//尽量在其他中间件前使用compression
app.use(compression());

基本的使用就是这样就ok了,另外如果想只对某些请求使用此功能,可以使用它的过滤方法:

app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
 if (req.headers['x-no-compression']) {
  // 这里就过滤掉了请求头包含'x-no-compression'
  return false
 }

 return compression.filter(req, res)
}

其他的功能请参考compression的文档。

另外附上nginx的配置

#on为启用,off为关闭
gzip on;

#设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。
gzip_min_length 1k;

#获取多少内存用于缓存压缩结果,‘4 16k'表示以16k*4为单位获得
gzip_buffers 4 16k;

#gzip压缩比(1~9),越小压缩效果越差,但是越大处理越慢,所以一般取中间值
gzip_comp_level 5;

#对特定的MIME类型生效,其中'text/html'被系统强制启用
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

简单解释下参数

1) gzip

语法:gzip on/off
默认值:off
作用域:http, server, location
说明:开启或者关闭 gzip 模块,这里使用 on 表示启动

2) gzip_min_length

语法:gzip_min_length length
默认值:gzip_min_length 0
作用域:http, server, location
说明:设置允许压缩的页面最小字节数,页面字节数从header头中的Content-Length中进行获取。默认值是0,不管页面多大都压缩。建议设置成大于1k的字节数,小于1k可能会越压越大。|

3) gzip_buffers

语法: gzip_buffers number size
默认值: gzip_buffers 4 4k/8k
作用域: http, server, location
说明:设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流。4 16k 代表以 16k 为单位,按照原始数据大小以 16k 为单位的4倍申请内存。

4) gzip_comp_level

语法: gzip_comp_level 1..9
默认值: gzip_comp_level 1
作用域: http, server, location
说明:gzip压缩比,1 压缩比最小处理速度最快,9 压缩比最大但处理最慢(传输快但比较消耗cpu)。这里设置为 5。
5) gzip_types

语法: gzip_types mime-type [mime-type ...]
默认值: gzip_types text/html
作用域: http, server, location
说明:匹配MIME类型进行压缩,(无论是否指定)"text/html" 类型总是会被压缩的。这里设置为 text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Vue和Flask通信的实现
May 19 Vue.js
JS SetInterval 代码实现页面轮询
Aug 11 #Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 #Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 #Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 #Javascript
JS非空验证及邮箱验证的实例
Aug 11 #Javascript
vue如何获取点击事件源的方法
Aug 10 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
关于工资低的辞职信
2014/01/14 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
联谊会主持词
2014/03/26 职场文书
企业承诺书怎么写
2014/05/24 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript