前端性能提升之gzip压缩

背景：尝试使用gzip压缩资源提升项目性能。使用gzip压缩有两种方法，方法1是前端请求文件时服务器压缩得到该文件的.gz格式文件，并返回.gz格式文件。方法2是前端打包时生成.gz格式文件，请求服务器时服务器返回.gz格式文件。

方法1：
nginx配置：

gzip on;
gzip_comp_level 6;
gzip_types application/javascript text/css;

效果：请求头的字段Content-Encoding值为gzip，发现生效，文件大小比之前请求的文件大小小了10倍左右。 外地同事反馈请求我这里的服务器时表示首屏时间从20多秒提升到了7秒左右。

方法2
下载compression-webpack-plugin的6.0.0版本，修改vue项目的vite.config.js:

const CompressionPlugin = require('compression-webpack-plugin');
module.exprts={
  configureWebpack:{
    plugins:[
      new CompressionPlugin({
        filename:'[path][base].gz',
        test:/\.js$|\.css$|\.html$/, // 文件类型
        threshold:10240
      })
    ]
  }
}

修改nginx配置：

gzip_static on;

效果：压缩后的文件大小和方法1差不多。该方法不需要服务器进行压缩。

其他说明

• 在请求头的字段accept-encoding可以看得到该资源支持的压缩类型比如“gzip,deflate,br”。
• 之所以没有对图片进行压缩，是因为尝试压缩后发现文件体积大小几乎没有变化，有一个文件的大小反而增大了0.1kb。