gzip压缩初探

前言

咱们平时工做中传文件时为了提升传输速度通常都会把文件压缩一下再传，那样速度回快一些，尤为是那些文件不少的文件夹，比较经常使用的压缩格式就是zip,rar了。那咱们平常网页中利用http协议请求的那些资源可不能够压缩呢，固然是能够了，这就要说到咱们今天的主角gzip了。

gzip以前我并无在项目中用过，就往往查阅文档时据说某一个框架文件经gzip压缩以后就变得多小多小了，甚是好奇，因此今天特地查了一下。

gzip压缩的好处

好处固然是很明显的啦，就是能够大大减少传输文件的大小，提升页面加载速度、节省带宽。并且压缩的比率是能够调节的，咱们经常使用的服务器端压缩是3到10倍，一个原本100k的文件能压缩到20k左右，想一想都美滋滋，今天看了咱们公司的官网用了gzip才发现压缩与不压缩差异仍是蛮大的，哈哈。固然并非全部的文件都能压缩这么多，像咱们经常使用的CSS,JS文件是能够压缩不少的，而图片那些文件原本就压缩过了就没有多少能够压缩了。

gzip压缩的过程

gzip是一种流行的文件压缩算法，他会把文件压缩为.gz而后传给浏览器，最后浏览器负责解压文件呈现给客户。因此，要想实现文件的gzip压缩与解压，服务端和浏览器端都得支持。他们的通讯过程大致以下：

• 首先咱们要将http请求的请求头中的==accept-encoding==属性设为gzip、deflate，代表浏览器支持gzip压缩方式
• web服务器收到浏览器的请求以后，会判断浏览器是否支持gzip压缩，若是支持就传输压缩后的响应内容，若是不支持就传输未压缩的内容。固然，服务器会对压缩文件进行缓存，并非每次请求都要再压缩一次
• 浏览器接收到内容后判断文件是否被压缩，若是压缩了就先解压再解析（IE5.5以上才支持gzip）

谁来压缩

答案就两个，不是服务端就是客户端。

上面已经讲到了之前经常使用的一种方式是服务端压缩，浏览器解压。其实咱们开发端但是能够压缩的，好比咱们平常用的打包软件webpack就有compression-webpack-plugin这么个插件专门作压缩的，大概用法以下：

const CompressionWebpackPlugin = require('compression-webpack-plugin');

plugins: [
 new CompressionPlugin({
    test: /\.js/,  //知足正则表达式的会被压缩
    filename: '[path].gz[query]',  //目标文件名
    algorithm: 'gzip',  //使用gzip压缩
    threshold: 10240,  //资源文件大于10240b=10k时会被压缩
  })
]

既然已经存在了服务端响应请求时压缩，为何还会存在应用构建时压缩这种方式呢？
存在而且被不少人使用就必定有它存在的价值，带着这份疑问我查询资料得知：gzip压缩文件是分等级的，共十级。等级越高压缩效果越好可也觉得着更耗时嘛。若是你在服务端相应请求时压缩，那我请求一个文件不仍是得等很久？并且即使是有了缓存，服务端压缩时仍是有时间开销的。

可是构建时压缩就不存在上面这些问题了，咱们如今的不少项目都是spa的项目，即便不是也是须要构建工具打包什么的，那咱们在这个过程当中就最大限度地使用gzip压缩代码，让服务器直接使用不是很好吗，反正咱们也不会每天打包生产版本的，哈哈。

固然，这样服务端也得相应地更改配置来读取咱们的压缩文件，会要麻烦一些，因此最终使用哪一种压缩方式还得根据具备的哑无需求来，可是使用gzip压缩是颇有必要的，毕竟效果是摆在那里的。

总结

在以前的一个vue单页面应用中我就遇到过打包以后文件仍是太大的问题，当时通过各类分拆和异步组件以后首屏文件仍是有一点大，我当时也想到了gzip，可当时的后台忽悠我说很麻烦，可我今天查了一下服务端压缩的话他们也不要加多少配置。因此啊，做为一个前端攻城狮服务端的知识多了解一下仍是有必要的，能够防忽悠嘛，哈哈...

今天用uglifyjs-webpack-plugin这个插件配置代码压缩信息时才想起咱们这个项目貌似木有使用gzip，因而乎从头了解了一下，因此记录一下。之后要多多利用起来！

参考

• 探索HTTP传输中gzip压缩的秘密
• HTTP方式下的Gzip压缩传输
• webpack4 的生产环境优化
• compression-webpack-plugin插件文档