vue项目中使用webpack 配置gzip压缩

什么是gzip

Gzip是若干种文件压缩程序的简称，通常指GNU计划的实现，此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。

在压缩优化方面的作用

通过gzip这个压缩程序，对资源进行压缩，从而降低请求资源的文件大小。

应用场景

在网络请求中，选择一个js或css或html，但凡在Response Headers中找到 content-encoding: gzip 键值对，这就说明这个文件启用了gzip压缩。响应头Etag:W/"字符串“表示启用的是在线压缩，Etag:"字符串"表示启用的是静态资源压缩加载。gzip压缩比率在5-6倍，服务器配置了静态gz加载后，浏览器也返回的是gz文件，就不会出现因为文件体积过大而导致线程卡住情况了。
1、打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求js/css等文件时，服务器配置相应压缩语法，返回对应的js.gz文件。这样可以省去服务器压缩的时间，减少一些服务端的消耗。
示例：此处使用compression-webpack-plugin@5.0.0版本，避免版本过高引起构建错误。

npm install compression-webpack-plugin@5.0.0 --save-dev
//vue.config.js
 configureWebpack:config => {
    if(process.env.NODE_ENV === "production"){
      return {
        plugins:[
          new CompressionPlugin({
            algorithm: 'gzip', // 使用gzip压缩
            test: /\.js$|\.html$|\.css$/, // 匹配文件名
            filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
            minRatio: 1, // 压缩率小于1才会压缩
            threshold: 10240, // 对超过10k的数据压缩,一般都会选择大于1字节的进行压缩，小于1字节可能压缩后反而体积更大了
            deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
          }),
        ]
      }
    }
  },
  //以ngix服务器为例，配置如下，gzip_static on这个属性是静态加载本地的gz文件
  gzip_static on

2、浏览器请求xx.js文件时，服务器对xx.js文件进行gzip在线压缩后传输给浏览器。前端不用进行任何配置，也不用webpack生成gz文件。以服务器压缩的时间开销和 CPU 开销（以及浏览器解析压缩文件的开销）为代价，省下了一些传输过程中的时间开销。

	# 开启gzip 不存在gz文件的时候进行在线压缩
    gzip  on; 
    
    # 开启静态加载本地的gz文件 有gz文件的时候进行静态压缩，此命令优先级高于在线压缩
    gzip_static on;
    
    # 设置缓冲区大小
    gzip_buffers 4 16k;
    
    #压缩级别官网建议是6
    gzip_comp_level 6;
 
    #压缩的类型
    gzip_types text/plain application/javascript text/css 	application/xml text/javascript application/x-httpd-php;