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

前言：在项目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类型不在这里面，就不压缩

修改成如下：
【前端性能优化|前端性能优化--减少首屏加载时间--gzip压缩】

文章图片

动态压缩优化效果：
文件大小优化变化

文章图片

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

文章图片

静态压缩指通过前端提前将静态文件压缩成.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模块