前端性能优化-开启gzip

Gzip压缩检测

1. 网址

• http://tool.chinaz.com/Gzips/
• http://pagespeed.webkaka.com/youhua/gzip/

2. 控制台查看

如果开启了gzip则显示gzip，没有则是空

Vue打包配置

1、安装compression-webpack-plugin插件，此插件就是用于打包压缩的。

// 这一步如果失败是插件版本过高，建议安装1.1.12版本
// npm install --save-dev compression-webpack-plugin
npm install --save-dev compression-webpack-plugin@1.1.12

2、配置webpack文件，开启gzip压缩功能(文件位于config/index.js)。

	// 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"],

3.修改配置

// build/webpack.prod.conf.js
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

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

asset改成filename后，压缩插件版本号要对应1.x
compression-webpack-plugin官网

4、输入命令打包查看效果。

npm run build

Nginx开启gzip功能配置

找到conf目录下的nginx.conf ,开启gzip并设置gzip_types的类型

  #打开gzip压缩
  gzip on;
  #不压缩临界值，大于1K的才压缩，一般不用改
  gzip_min_length 1k;
  #设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流，这里设置以16k为单位的4倍申请内存
  gzip_buffers 4 16k;
  #默认为http 1.1，现在99.99%的浏览器基本上都支持gzip解压了，所有无需设置此项
  #gzip_http_version 1.0;
  #gzip压缩比，1 最小处理速度最快，9 最大但处理最慢（传输快但比较消耗cpu）
  gzip_comp_level 3;
  #要压缩的文件类型，注意"text/html"类型无论是否指定总是会被压缩的
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon;
  #on的话会在Header里增加"Vary: Accept-Encoding"，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩
  #我这里的浏览器肯定支持gzip压缩，所以就不开启此功能了
  gzip_vary off;
  #IE6对Gzip不怎么友好，不给它Gzip压缩了
  gzip_disable "MSIE [1-6]\.";

注：image/jpeg image/gif image/png 从gzip_types中移除，因为越压缩越大……
采用HTTP压缩已经被压缩过的东西并不能使它更小
参数配置：Nginx gzip参数详解

重新部署服务器

nginx -s reload

查看

打开控制台，可以看到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压缩后传输给浏览器