Gzip压缩 与 http

压缩文件的目的就是为了把传输文件的体积减小，加快传输速度。在 http 传输中开启 gZip的目的也是如此

传输压缩文件给别人时候一般都带着后缀名 .rar, .zip之类，对方在拿到文件后根据相应的后缀名选择不同的解压方式然后去解压文件。我们在 http 传输时候解压文件的这个角色的扮演者就是我们使用的浏览器

• 服务端发送的数据可以配置一个 Content-Encoding 字段，这个字段用于说明数据的压缩方法

• 客户端在接受到返回的数据后去检查对应字段的信息，然后根据对应的格式去做相应的解码。客户端在请求时，可以用 Accept-Encoding 字段说明自己接受哪些压缩方法。

在网上看到最多的也是诸如 nginx 开启 gZip 配置之类的文章，但是现在前端流行 spa 应用, 用 react, vue 之类的框架时候总伴随这一套自己的脚手架,一般用 webpack 作为打包工具，其中可以配置插件 如compression-webpack-plugin 可以让我们把生成文件进行 gZip 等压缩并生成对应的压缩文件，而我们应用在构架时候有可能也会在服务区和前端文件中放置一层 node 应用来进行接口鉴权和文件转发。nodejs中我们熟悉的express 框架中也有一个compression 中间件，可以开启gZip,

NGINX压缩有压缩等级1-10，如果这个压缩等级越高，服务器要压缩很久才返回数据，反而会损耗CPU和时间。现在的应用都会使用spa应用，文件都是打包生成的，所以webpack中打包生成高压缩等级的文件，作为静态资源存放在服务器上，接收到请求后把压缩文件返回回来，是一种更好的解决方式。

const CompressionWebpackPlugin = require('compression-webpack-plugin');
​
webpackConfig.plugins.push(
 new CompressionWebpackPlugin({
 asset: '[path].gz[query]',
 algorithm: 'gzip',
 test: new RegExp('\\.(js|css)/pre>),
 threshold: 10240,
 minRatio: 0.8
 })
) // 压缩使用的是 zlib 库，而 zlib 分级来说，默认是 6 ，最高的级别就是9

服务端怎么找到这些文件

压缩文件会产生index.css, index.js的压缩文件，在服务端简单处理可以判断这两个请求然后给予相对应的压缩文件。以 node 的 express 为例

...
app.get(['/index.js','/index.css'], function (req, res, next) {
 req.url = req.url + '.gz'
 res.set('Content-Encoding', 'gzip')
 res.setHeader("Content-Type", generateType(req.path)) // 这里要根据请求文件设置content-type
 next()
})

图片之类文件则不会被 gzip 压缩太多，因为它们已经内置了一些压缩，一些文件（比如一些已经被压缩的像.zip文件那种）再去压缩可能会让生成的文件体积更大一些。当然已经很小的文件也没有去压缩的必要了。