网站优化总结 —— gzip压缩

为什么会考虑这个问题呢？当网站上线后，如果服务器处理器、内存、带宽等性能不高的时候，此时去访问我们项目，网站总会花好久才会显示出来，如果项目还适配了移动端的话，那简直更慢~
又或者当项目越做越大，项目文件也越来越大，减慢了页面的访问速度~

这个时候，我们就会考虑到gzip压缩，以此减少数据传输量、传输时间，节省服务器网络带宽。

1. 服务端响应请求压缩

本人用的是nginx，这个配置文件比较简单，直接在配置文件中增加gzip相关属性即可，本文中的web服务器也主要以nginx为例。

nginx相关参数的话，请参考以下网站吧

• nginx-httpgzip模块；
• HttpGzip模块(Nginx中文文档)

服务端在接收到请求后，找到响应文件，并进行压缩，然后将压缩后的文件作为内容返回给客户端

不过在服务端进行启gzip压缩的话，会消耗服务端cpu，可能会对cpu性能产生影响，不能将压缩等级开太大，
那这个问题如何解决呢？前端代码构建过程中就可以进行压缩，而且可以把压缩比降到最小

2. 构建时压缩

目前前端主要使用的构建工具主要由gulp、webpack。
gulp的话，有gulp-zip插件可以进行zip压缩
webpack的话，compression-webpack-plugin这个差劲进行gzip压缩
主要讲一下compression-webpack-plugin，这个插件的话，在编译的时候，会同时生成gz格式的文件，此时需要在nginx中开启gzip_static:on。
gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容(注意： 源文件和gz文件文件必须都在，不然就会失败)。

实践例子：

参考文档：

• 前端性能优化：gzip压缩文件传输数据
• 探索HTTP传输中gzip压缩的秘密