记一次项目开启gzip压缩后,性能提升

今天在使用Lighthouse进行性能分析时,看到Performance值为52,看了具体分析显示js文件过大,一个普通的js有2.4MB之大

又强刷浏览器看具体请求,确认是打包后的文件没有开启gzip压缩

这是打包后的文件大小, 看到和浏览器的大小一致

下面进行配置gzip压缩

在nginx.conf中加入

serve{
    # 开启gzip
    gzip on;

    # 设置压缩所需要的缓冲区大小
    gzip_buffers 32 4K;

     # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
    gzip_comp_level 6;

    # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
    gzip_min_length 100;

     # 进行压缩的文件类型。
    gzip_types application/javascript text/css text/xml;

    #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
    gzip_disable "MSIE [1-6]\."; 
    
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;
  }

然后打包发布,下面我们来看看效果

打包时文件大小

接口请求情况

性能分析

这时,我们看到Performance明显提高了