前端性能优化之gzip

jzzlee 发布于2019-08-23 15:11 / 1938人阅读

摘要：协议上的编码是一种用来改进应用程序性能的技术。目前主流的浏览器等都支持该协议。启用或禁用响应。可接受的值范围为到。设置将被压缩的响应的最小长度。长度仅由响应头字段确定。而里面的只是表示前端用户浏览器支持的压缩方式。

gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。

当然WEB服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。

下面就以Vue项目为例，介绍一下gzip的使用（vue-cli 2.*）

1、在/config/index.js中，修改配置开启gzip

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ["js", "css"],

在修改productionGzip的默认值（false）为true之前，先安装所需的依赖npm install --save-dev compression-webpack-plugin。

如果按上述操作完成后，打包时出错，建议更换低版本的compression-webpack-plugin，推荐使用1.1.12或者1.1.11版本等
npm uninstall --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@1.1.12

2、在nginx中开启gzip，/nginx/conf/nginx.conf中添加gzip配置

http:{ 
  #启用或禁用gzipping响应。#
  gzip on; 
  #设置用于压缩响应的缓冲区number和size。默认情况下，缓冲区大小等于一个内存页面。这是4K或8K，具体取决于平台。#
  gzip_static on;
  #启用或禁用gzipping响应。#
  gzip_buffers 4 16k;
  #设置level响应的gzip压缩。可接受的值范围为1到9。#
  gzip_comp_level 5;
  #设置将被gzip压缩的响应的最小长度。长度仅由“Content-Length”响应头字段确定。#
  gzip_min_length 100;
  #匹配MIME类型进行压缩，text/html默认被压缩。#
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

修改完nginx配置，重启服务。

关于gzip详细的配置和描述，请查阅 Module ngx_http_gzip_module

至此，gzip已开启。你可以运行你的项目去检测一下。

打开Chrome控制台，可以看到Network下的Response Headers中返回了Content-Encoding: gzip，表明gzip开启成功。
而Request Headers里面的Accept-Encoding: gzip只是表示前端（用户浏览器）支持gzip的压缩方式。

服务器支持gzip的方式可以有两种：
1、打包的时候生成对应的.gz文件，浏览器请求xx.js时，服务器返回对应的xxx.js.gz文件
2、浏览器请求xx.js时，服务器对xx.js进行gzip压缩后传输给浏览器

专线服务云服务器前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101661.html

前端性能优化之gzip

摘要：客户端请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。建议设置成大于的字节数，小于可能会越压越大。背景如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩压缩方式前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webp...

张利勇 2019-08-29 14:06 评论0 收藏0
前端性能优化之gzip

摘要：客户端请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。建议设置成大于的字节数，小于可能会越压越大。背景如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩压缩方式前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，webp...

Nino 2019-08-21 18:23 评论0 收藏0
PHP 进阶之路 - 亿级 pv 网站架构实战之性能压榨

摘要：业务和架构不分家，架构是建立在对业务的理解之上的。主键最好保持顺序递增，随机主键会导致聚簇索引树频繁分裂，随机增多，数据离散，性能下降。没有索引的更新，可能会导致全表数据都被锁住。本博客并非全部原创，其实是一个知识的归纳和汇总，里面我引用了很多网上、书上的内容。也给出了相关的链接。本文涉及的知识点比较多，大家可以根据关键字去搜索相关的内容和购买相应的书籍进行系统的学习。不对的地方...

SnaiLiu 2019-06-28 13:18 评论0 收藏0
「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
[ 性能优化 ] Yahoo前端优化规则规则 (1)

摘要：自己是做前端开发的，在性能方面，根据的调查，后台只占，而前端高达之多，其中有的东西是可以优化的。相信很多人都听过优化网站性能的条规则。淘宝和阿里巴巴中文站目前都是这样做的。目前的浏览器都能良好地支持。相信互联网已经越来越成为人们生活中不可或缺的一部分。Ajax，flex等等富客户端的应用使得人们越加幸福地体验着许多原先只能在C/S实现的功能。比如Google机会已经把最基本的o...

xiaolinbang 2019-08-28 18:07 评论0 收藏0