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 相关文章推荐
用jquery生成二级菜单的实例代码
Jun 24 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
实例分析javascript中的异步
Jun 02 Javascript
js实现ajax的用户简单登入功能
Jun 18 Javascript
vue+iview实现手机号分段输入框
Mar 25 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来实现网络服务
2009/09/15 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[01:13]这,就是刀塔
2014/07/16 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
Python中的with...as用法介绍
2015/05/28 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
用python对oracle进行简单性能测试
2020/12/05 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
简历中个人自我评价范文
2013/12/26 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
授权委托书范文
2014/07/31 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
Java线程的6种状态与生命周期
2022/05/11 Java/Android