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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jquery的颜色选择插件实例代码
Oct 02 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
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系统命令函数使用分析
2013/07/05 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python远程方法调用实现过程解析
2020/07/28 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
一套Java笔试题
2016/08/20 面试题
大学生简单自荐信
2013/11/10 职场文书
公司领导推荐信
2013/11/12 职场文书
翻译专业应届生求职信
2013/11/23 职场文书
中学生班主任评语
2014/01/30 职场文书
法人委托书范本格式
2014/09/15 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年业务工作总结
2014/11/17 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
检讨书格式
2019/04/25 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Android Rxjava3 使用场景详解
2022/04/07 Java/Android