前端性能优化之 gzip压缩文件传输数据

一、文件压缩的好处

前端生产环境中将js、css、图片等文件进行压缩的好处显而易见，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。

二、http协议如何支持压缩文件的传输

1、浏览器请求数据时，通过Accept-Encoding说明自己可以接受的压缩方法

2、服务端接收到请求后，选取Accept-Encoding中的一种对响应数据进行压缩

3、服务端返回响应数据时，在Content-Encoding字段中说明数据的压缩方式

4、浏览器接收到响应数据后根据Content-Encoding对结果进行解压

注：如果服务器没有对响应数据进行压缩，则不返回Content-Encoding，浏览器也不进行解压

三、什么时候压缩

四、服务器响应请求时压缩（nginx）

服务端先不多说

五、构建时压缩（webpack）

webpack的compression-webpack-plugin插件用于支持构建项目时压缩文件，Vue项目为例，具体配置如下：

1、首先安装插件，命令：npm install --save-dev compression-webpack-plugin

2、在config/index.js文件中打开Gzip开关，配置需要压缩的文件扩展名

由于项目是通过vue-cli搭建的，所以就直接通过webpack来配置了。 修改config目录下的index.js，开启gzip

如果没有默认安装compress-webpack-plugin插件，请先安装。

在build目录下的webpack.prod.conf.js添加代码

 3、webpack.prod.conf.js中设置具体压缩配置项

 

 

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

 

 4、打包后会同时保留原文件和压缩后的文件，存储等条件允许的情况下，原文件也建议发布到服务器以支持不兼容gzip的浏览器

 

5、服务端nginx启动gzip_static

gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容。

为了要兼容不支持gzip的浏览器，启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的情况下，将会大大增加磁盘空间。我们可以利用nginx的反向代理功能实现只保留gz文件（参考文章中提到本文未尝试）。

        nginx需要安装http_gzip_static_module以支持gzip_static，具体方法见《源码安装nginx》

由于我用的是nginx，所以我就只讲nginx的配置了。

打开conf/ngxin.conf

在http、server、location下加以下代码，详情点击nginx文档。

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;

最后 nginx -s reload 重启。

 压缩前

压缩后

gzip压缩原理

浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型。

但是不是每个浏览器都支持gzip的，如果知道客户端是否支持gzip呢，请求头中有个Accept-Encoding来标识对压缩的支持。客户端http请求头声明浏览器支持的压缩方式，服务端配置启用压缩，压缩的文件类型，压缩方式。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

那么怎么看有没有用gzip压缩的文件呢，打开f12，查看network，点击“use large rows”表情来查看更多信息。包含了压缩以后的大小和源文件的大小。

 

 

 

奇迹般的，主页从187kb压缩到了59kb。

content-encoding是gzip的话就说明返回的是gzip

还有一点 gzip不压缩图片，因为压缩之后会更大- -，所以一般到是压缩css和js

 

 

如何启用gzip

前面说过了，启用gzip需要客户端和服务端的支持，如果客户端支持gzip的解析，那么只要服务端能够返回gzip的文件就可以启用gzip了，现在来说一下几种不同的环境下的服务端如何配置

开启gzip 如果浏览器端不支持解压 页面会怎么样

支持baigzip的浏览器会通过HTTP头告诉服du务器zhi，如Accept-Encoding: gzip。服务器看到这个dao才返回gzip的zhuanshu。这是内HTTP协议的规容定。
如果浏览器不支持，那么服务器返回的数据不会是gzip内容了。

Accept-Encoding 为浏览器支持的的方式

Accept-Encoding: gzip,deflate,sdch

那么问题来了，前端发起请求需要设置 Accept-Encoding:gzip 吗？这样不就是强制了吗？如果客户端不支持怎么办？

关于HTTP 请求头Accept-Encoding 的理解

Accept-Encoding表示Http响应是否进行压缩,一般的浏览器在访问网页时,是默认在请求头中加入
Accept-Encoding: gzip, deflate ,表示这个请求的内容希望被压缩,压缩的目的是为了减少网络流量,
但是这个只是协议,只能是要求而不是强制的,如果服务器不支持压缩或者没有开启压缩,则不能起到作用,
如果服务器也是支持压缩或者开启压缩,则会在响应头中加入Content-Encoding: gzip 头部,