为什么要配置gzip呢？

因为快啊，以 elementUI 为例，657KB大小压缩过后为191KB

有什么缺点？

服务器压缩一遍，客户端解压一遍，消耗一定性能

我们可以在打包的时候将js或一些静态文件再打包成.js.gz的格式，方便nginx等工具可以不用压缩直接发送压缩好的文件到客户端

怎么做？

以vue-cli的vue.config.js为例

module.exports = {
  chainWebpack(config) {
    config
      .when(process.env.NODE_ENV === 'production',
        config => {
          config
            .plugin('CompressionWebpackPlugin')
            .use('compression-webpack-plugin', [
              {
                filename: '[path].gz[query]',
                // 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
                algorithm: 'gzip',
                // 算法，默认'gzip'
                test: /\.(js|css)$/,
                // 所有匹配该正则的资源都会被处理。默认值是全部资源。
                // 这里只匹配了js、css文件
                threshold: 10240,
                // 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
                minRatio: 0.8
                // 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
              }
            ])
            .end()
        })
  }
}

nginx配置

gzip 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 application/xml+rss;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

完成后如何查看是否有效呢，先重启nginx，然后随手点个js文件看看， etag 标签不带w就是有效