「简明性能优化」双端开启Gzip指南

本文目录：

• 开启gzip压缩的好处
• Webpack的 gzip设置
• Nginx的 gzip设置
• 如何验证 gzip？
• 双端Gzip区别及其意义

1. 开启gzip压缩的好处

能够减少文件体积，传输速度更快。gzip是节省带宽和加快站点速度的有效方法。

服务端发送数据时能够配置 Content-Encoding：gzip，用户说明数据的压缩方式

客户端接受到数据后去检查对应字段的信息，就能够根据相应的格式去解码。

客户端请求时，能够用 Accept-Encoding:gzip，用户说明接受哪些压缩方法。

在 http／1.0协议中关于服务端发送的数据能够配置一个 Content-Encoding 字段，这个字段用于说明数据的压缩方法

Content-Encoding: gzip
Content-Encoding: compress
Content-Encoding: deflate
复制代码

客户端在接受到返回的数据后去检查对应字段的信息，而后根据对应的格式去作相应的解码。客户端在请求时，能够用 Accept-Encoding字段说明本身接受哪些压缩方法。

Accept-Encoding: gzip, deflate
复制代码

2. Webpack的 gzip设置

这里使用的插件为：CompressionWebpackPlugin

const CompressionWebpackPlugin = require（'compression-webpack-plugin'）
module.exports = { 
    “plugins”：[new CompressionWebpackPlugin] 
}
复制代码

具体配置：

const CompressionWebpackPlugin = require('compression-webpack-plugin');

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(js|css)$'),
      // 只处理大于xx字节 的文件，默认：0
      threshold: 10240,
      // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
      minRatio: 0.8 // 默认: 0.8
      // 是否删除源文件，默认: false
      deleteOriginalAssets: false
    })
)
复制代码

开启gzip前

开启gzip后 gzip后的大小从 277KB到只有 ~91.2KB！

3. Nginx的 gzip设置

打开 /etc/nginx/conf.d编写如下配置。

server {
    gzip on;
    gzip_static on;    
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied  any;
    gzip_vary on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    # 注：99.99%的浏览器基本上都支持gzip解压了，因此能够不用设这个值,保持系统默认便可。
    gzip_http_version 1.1;    
    ...
}
复制代码

gzip on|off：

• 默认值: gzip off
• 开启或者关闭gzip模块

gzip_static on|off：

• 默认值: gzip_static off
• nginx对于静态文件的处理模块
• 该模块能够读取预先压缩的gz文件，这样能够减小每次请求进行gzip压缩的CPU资源消耗。
• 该模块启用后， nginx首先检查是否存在请求静态文件的gz结尾的文件，若是有则直接返回该gz文件内容。
• 为了要兼容不支持gzip的浏览器，启用 gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的状况下，将会大大增长磁盘空间。咱们能够利用nginx的反向代理功能实现只保留gz文件。

gzip_types mime-type[mime-type...]:

• 默认值: gzip_types text/html (默认不对js/css文件进行压缩)
• nginx做为反向代理的时候启用，开启或者关闭后端服务器返回的结果，匹配的前提是后端服务器必需要返回包含"Via"的 header头。
• 压缩类型，匹配MIME类型进行压缩

gzip_proxied[off|expired|no-cache|no-store]...:

• off - 关闭全部的代理结果数据的压缩
• no-cache - 启用压缩，若是header头中包含"Cache-Control:no-cache" 头信息

gzip_vary on|off:

• 和 http头有关系，加个 vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，因此避免浪费不支持的也压缩，因此根据客户端的 HTTP头来判断，是否须要压缩

gzip_comp_level:

• 默认值：1(建议选择为4~6)

• gzip压缩比/压缩级别，压缩级别1-9，级别越高压缩率越大，固然压缩时间也就越长（传输快但比较消耗cpu）。

gzip_buffers:

• 默认值: gzip_buffers44k/8k

• 设置系统获取几个单位的缓存用于存储 gzip的压缩结果数据流。

• 例如 4 4k 表明以4k为单位，按照原始数据大小以4k为单位的4倍申请内存。 4 8k 表明以8k为单位，按照原始数据大小以8k为单位的4倍申请内存。

• 若是没有设置，默认值是申请跟原始数据相同大小的内存空间去存储 gzip压缩结果。

gzip_http_version:

• 默认值: gzip_http_version1.1(就是说对 HTTP/1.1协议的请求才会进行 gzip压缩)

• 注：99.99%的浏览器基本上都支持 gzip解压了，因此能够不用设这个值,保持系统默认便可。

保存配置后，从新启动 Nginx:

$ sudo service nginx restart
复制代码

开启gzip前

开启gzip后

4. 如何验证 gzip？

能够看 Network，但这里我更推荐用 curl:

经过使用 curl测试每一个资源的请求响应，并检查 Content-Encoding：

显示 Content-Encoding:gzip，即为配置成功。

5. 双端Gzip区别及其意义

不一样之处在于：

1. Webpack压缩会在构建运行期间一次压缩文件，而后将这些压缩版本保存到磁盘。

2. nginx在请求时压缩文件时，某些包可能内置了缓存,所以性能损失只发生一次(或不常常),但一般不一样之处在于,这将在响应 HTTP请求时发生。

3. 对于实时压缩,让上游代理(例如 Nginx)处理 gzip和缓存一般更高效，由于它们是专门为此而构建的,而且不会遭受服务端程序运行时的开销(许多都是用C语言编写的) 。

4. 使用 Webpack的好处是， Nginx每次请求服务端都要压缩好久才回返回信息回来，不只服务器开销会增大不少，请求方也会等的不耐烦。咱们在 Webpack打包时就直接生成高压缩等级的文件，做为静态资源放在服务器上，这时将 Nginx做为二重保障就会高效不少。

5. 注：具体是在请求时实时压缩，或在构建时去生成压缩文件，就要看项目业务状况。

免责声明

不是打算教 Webpack或 Nginx，只是以为好玩就简单写了一下。

意思就是写得略粗糙，别喷我。。。

求一份深圳的内推

好了，又水完一篇，入正题：

目前本人在(又)准备跳槽，但愿各位大佬和HR小姐姐能够内推一份靠谱的深圳前端岗位! 996.ICU 就算了。

• 微信：huab119
• 邮箱：454274033@qq.com

做者掘金文章总集

• 「Vue实践」5分钟撸一个Vue CLI 插件
• 「Vue实践」武装你的前端项目
• 「中高级前端面试」JavaScript手写代码无敌秘籍
• 「从源码中学习」面试官都不知道的Vue题目答案
• 「从源码中学习」Vue源码中的JS骚操做
• 「从源码中学习」完全理解Vue选项Props
• 「Vue实践」项目升级vue-cli3的正确姿式
• 为什么你始终理解不了JavaScript做用域链？

公众号