从URL到页面展示进行分析web优化（四，关于gzip提升加载速度）

使用原理：

如何开启gzip压缩？

大家可能听过前端gzip，通过webpack开启gzip，对文件进行压缩。

• compression-webpack-plugin 插件

也听过node.js中间层，配置gzip对文件进行压缩。

• compression 中间件

大家肯定也看过，Nginx配置gzip的一些文章。

原理：

客户端通过请求头，通知服务端用什么样子的压缩方式压缩的。（gzip, deflate等）

这样服务端知道用什么进行解压。

Accept-Encoding: gzip, deflate

服务器通过响应头，通知客户端用什么方式压缩的

Content-Encoding: gzip
Content-Encoding: deflate

Gzip压缩配置

---

webpack的具体详情配置，这里就不说了。

静态压缩：

通过webpack压缩之后，600多k的文件可以被压缩到120多k。

当客户端将压缩好的文件部署到服务器上，接下来就是服务器的工作了。

用Nginx举例子，服务端通过使用Nginx配置来支持gzip压缩后的文件。然后重启Nginx。

压缩前：

压缩后：

压缩之前2.66s，压缩之后是589ms。提升的速度不仅是肉眼可见了。提升了75%。

现在我们呈上客户端与服务端的配置。

客户端（webpack）：

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

服务端（Nginx）：

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;

动态压缩

动态压缩只是服务端配置需要修改，客户端并没改变，所以我们只来看Nginx的配置。

gzip             on;
gzip_min_length  1000;
gzip_proxied     expired no-cache no-store private auth;
gzip_types       text/plain application/xml;

别忘记配置完重启Nginx。

缺点：

不管是动态压缩，还是静态压缩，我们知道在压缩过程中肯定会占用CPU资源。

压缩比越高，占用的CPU资源就越高。

总结：

gzip压缩就讲到这里了，后续本人如果了解到了其他知识再补充进来，谢谢大家指正！！！