vue-cli3 开启Gzip压缩

gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右

安装依赖:

cnpm i -D compression-webpack-plugin --save

在vue.congfig.js中配置：

const CompressionPlugin = require('compression-webpack-plugin') //引入

module.exports = {
  publicPath: "/",
  outputDir: "dist",
  lintOnSave: false,
  productionSourceMap: false,
  assetsDir: "static",
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, //匹配文件名
          threshold: 10240, //对超过10K的数据进行压缩
          deleteOriginalAssets: false //是否删除原文件
        })]
      }
    }
  }
}

压缩后进而会生成相应的gz格式的文件，但是仅仅前端配置是远远不够的，如果使用了nginx，则还需要对其进行配置。

http {
 
    gzip on; # 开启 gzip 压缩
    gzip_static on; # 若存在静态 gz 文件，则使用该文件
    gzip_min_length 10k; # 设置允许压缩的页面最小字节数
    gzip_buffers 16 8k; # 设置用于处理请求压缩的缓冲区数量和大小
    gzip_comp_level 1; # 设置压缩级别 1-9，数字越大，压缩后的大小越小，也越占用CPU，花费时间越长
	# 对特定的 MIME 类型生效, 其中'text/html’被系统强制启用
    gzip_types application/javascript text/css font/ttf font/x-woff;
    gzip_vary on; # 是否在 http header中 添加 Vary:Accept-Encoding, on | off
    gzip_http_version 1.1; # 在 http/1.1 的协议下不开启压缩
}

gzip 相关配置说明可参考：Nginx gzip参数详解及常见问题

配置完成后如果响应头中出现Content-Encoding: gzip 则代表配置成功

同时，也能通过比较资源的实际大小和请求大小是否一致来判断是否开启了压缩。