vue gzip压缩和服务器开启gzip

修改vue.config.js

// 安装 
npm i -D compression-webpack-plugin
// vue.config.js
const defaultPluins = [
  new webpack.ProvidePlugin({
    'window.Quill': 'quill/dist/quill.js',
    'Quill': 'quill/dist/quill.js',
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  })
]

  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: defaultPluins.concat([
          new CompressionPlugin({
         // asset: '[path].gz[query]',
     	   // algorithm: 'gzip',
            test: /\.js$|\.html$|.\css/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 不删除源文件
          })
        ])
      }
    } else {
      return {
        plugins: defaultPluins
      }
    }
  },

配置参数详解：

	asset： 目标资源名称。 [file] 会被替换成原始资源。[path] 会被替换成原始资源的路径， [query] 会被替换成查询字符串。默认值是 "[path].gz[query]"。
	algorithm： 可以是 function(buf, callback) 或者字符串。对于字符串来说依照 zlib 的算法(或者 zopfli 的算法)。默认值是 "gzip"。
	test： 所有匹配该正则的资源都会被处理。默认值是全部资源。
	threshold： 只有大小大于该值的资源会被处理。单位是 bytes。默认值是 0。
	minRatio： 只有压缩率小于这个值的资源才会被处理。默认值是 0.8。

另一种写法：

    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 生产环境
            config.plugins.push(
                new CompressionWebpackPlugin({
                    asset: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            );

        } else {
            // 开发环境
        }
    },

Nginx 配置

    #gzip  on;
    gzip            on;
    gzip_min_length 1000;
    gzip_proxied    expired no-cache no-store private auth;
    gzip_types      text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;