前言:在项目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 |
可见优化效果还是很显著的,还有其他方法看我文章