前端性能优化--减少首屏加载时间--gzip压缩

前言：在项目build（vue、react…）之后，我们再使用gzip做一下压缩这些静态资源，让用户请求这些资源的大小会降低很多，从而达到减少首屏加载时间的目标，而gzip压缩主要分为两种“动态压缩”、“静态压缩”

动态压缩

指的是在服务器上进行配置，使得每次用户在访问页面时，即发起http请求到服务器，服务器就会自动把你访问的资源先压缩成.gz文件，然后浏览器下载之后再进行解压，从而达到提高访问效率的特点。

步骤（服务器以nginx为例）：

打开nginx的配置文件：

将gizp on;注释打开，表示启动gzip压缩，然后并加入如下配置在其下面：

• gzip_comp_level 5; // 表示压缩级别，有1-9的级别可选，默认值为1，级别越高压缩得越厉害，但同样对服务器的性能要求越高，所以不是越高越好，也许你设置的越高，所需要的服务器的GPU资源越多，压缩的耗时越长，导致总共的请求时间还反而变长了，所以应该视情况而定。
• gzip_min_length 2k; // 表示压缩的最低大小，默认20k，比如我这里写的是2k，就表示该文件大小如果大于2k了，就采用gzip压缩，否则不压缩
• gzip_types application/javascript text/css; // 表示要压缩的MIME类型，默认值：text/html，如果请求的MIME类型不在这里面，就不压缩

修改成如下：

动态压缩优化效果：

文件大小优化变化

取出同一个文件的响应头变化

静态压缩

指通过前端提前将静态文件压缩成.gz文件，然后再放在服务器上，这样浏览器访问资源的时候，服务器就不用另外花费GPU来压缩这些文件了，因为你已经提前压缩好了，相对于动态压缩会更好一些。

步骤：

1、安装compression-webpack-plugin，

命令：

  npm install compression-webpack-plugin -D

或

  yarn add compression-webpack-plugin -D

2、webpack中配置（不同的框架的脚手架配置文件方法不同，所以这里就统一列出webpack的配置）：

 	const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const productionGzipExtensions = ['js','css']
    
    // 配置compression-webpack-plugin
    new CompressionWebpackPlugin({
      algorithm:'gzip', // 可以是 (buffer, cb) => cb(buffer) 或者是使用 zlib 里面的算法的 {String}
      test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), //处理所有匹配此 {RegExp} 的资源
      threshold:10240, //只处理比这个值大的资源。按字节计算，即这里的10240为10kb，也就是文件大小大于10kb的才处理
      minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
    })

3、打开nginx压缩包目录，依次执行命令下载相关nginx模块

#  usr/local/nginx-1.20.0

./configure http_gzip_static_module

make && make install

4、在服务器上配置，这里以nginx为例，打开nginx的配置文件

重启nginx即可，优化后的效果：
*注意：无论是哪种方式，只要修改过nginx配置，都要重启才能生效

最后，优化对比：

文件：main.28acee27.js

情况	大小	请求时间
未优化	2.6M	34.53s
动态gzip	730KB	8.64s
静态gzip	719KB	6.58s

文件：main.5acf62b1.css

情况	大小	请求时间
未优化	783kb	10.41s
动态gzip	112KB	286ms
静态gzip	108KB	466ms

可见优化效果还是很显著的，还有其他方法看我文章