web性能优化之Gzip压缩

如果你想节省带宽提高网站速度，压缩是一种简单有效的方法。一个现代的浏览器要想不仅要享受到现代网络信息还要享受到现代互联网的速度，就得开启gzip压缩。以下是如何设置。

等等，为什么我们要开启gzip压缩

在此之前，我有必要解释一下什么编码。当你在互联网上想请求一个文件时，比如http://www.google.com/index.html，你的浏览器会和服务器有一个会话，大概如下如所示。 

1、浏览器：嘿，给我来一个 index.html文件

2、服务器：好的，让我去找找它是不是在~

3、服务器：找到它了，我会返回一个成功的状态码（200 ok），我正在发送文件……

4、浏览器：100kb？ 我滴天……等啊……等啊，好的，下载下来了

那现在问题在哪呢？

好吧，这系统是正常的，但是太低效了，坦白讲100kb是一大段的文字，HTML是冗余的，每一个都有一个几乎相同的闭合标签。虽然通篇文字都有重复，但是只要你砍掉任何的内容，html（以及它的一奶同胞xml）都不会正常显示。

如果我们传输一个替代原始大文件的zip的压缩文件给浏览器，就会节省带宽和下载时间。当浏览器可以下载zip文件，解压，并且渲染给用户。下载很快，页面加载也很快，用户心情就会very good。这个浏览器–服务器的会话大概是酱紫的：

1、 浏览器：嘿，给我来一个index.html，如果要有，给我来一个压缩版的可以吗 

2、 服务器：容我找找……好，满足你，如果找到了给你压缩以下，gzip格式的哦 

3、 服务器：yep，找到了，正在压缩，马上传给你。

4、 浏览器：太棒了，只有10kb，我来解压，并且渲染给用户。

情况很简单：文件越小，下载更快，用户感受更好。

那怎么开启Gzip压缩呢

1、使用自动化构建工具

1、webpack构建

使用compression-webpack-plugin插件，详情https://github.com/webpack-contrib/compression-webpack-plugin

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [
    new CompressionPlugin({
      level: 9, // 级别越高压缩率越大，压缩时间也就越长
      test: /.(js|css|woff|ttf)$/, // 匹配需要压缩的文件后缀 看需求
      threshold: 10240 // 大于10kb的会压缩，默认为0
    })
  ],
};

2、vue-cli构建

简单配置

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        // 所有匹配该正则的资源都会被处理。默认值是全部资源。
        test: /.(js|css|woff|ttf)$/,
        //只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
        threshold: 10240,
        //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
        minRatio: 0.8
      })
    ] 
  }
}

复杂配置

module.exports = {
  chainWebpack(config) {
    if(process.env.NOVE_ENV === 'production'){ // 生产环境使用
      config.plugin('compress')
        .use('compression-webpack-plugin', [
          {
            test: /.(js|css|woff|ttf)$/, // 匹配需要压缩的文件后缀 看需求
            threshold: 10240 // 大于10kb的会压缩，默认为0
          }
        ])
        .end()     
    }
  }
}

2、对于Nginx服务器

修改nginx.conf

gzip on;
gzip_static on;
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

其中gzip_static on;可以搭配webpack的compression-webpack-plugin插件使用，直接使用已经压缩的gz文件，就不需要服务器再进行压缩

3、对于Apache服务器

首先编辑 http.conf 文件

  去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释#
  去掉 #LoadModule deflate_module modules/mod_deflate.so 前面的注释#

3.1、方法一：
  去掉 #LoadModule filter_module modules/mod_filter.so 前面的注释#      如果使用.htaccess可以不开启这项

然后在http.conf底部加上下面的代码

#Begin open Gzip
<IfModule deflate_module>
SetOutputFilter DEFLATE
# Don’t compress images and other 
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary 
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary 
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary 
AddOutputFilterByType DEFLATE text/html text/php text/plain text/xml text/css text/js 
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

#OR 或者逐个添加规则
<IfModule mod_deflate.c>
# 压缩等级 9
DeflateCompressionLevel 9
# 压缩类型 html、xml、php、css、js
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
AddOutputFilter DEFLATE js css
</IfModule>

3.2、方法二：

在你单个网站的.htaccess文件里增加如下代码：

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css json ttf
</ifmodule>

验证压缩的效果

一旦你配置好了你的服务器，检查他是不是生效了。 

1、在线查看：用网页GZIP压缩检测来检查你的网页是不是确实压缩了。 

2、浏览器查看：在chrome谷歌浏览器，F12打开 开发者工具–> network页签（火狐和IE浏览器也是相似的）。刷新你的页面，点击这network航信息来查看。这“Content-encoding: gzip” 的头信息意味着内容压缩了传过来的。

点击“use large rows”来查看更多信息。包含了压缩以后的大小和源文件的大小。

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