前端性能优化：gzip压缩⽂件传输数据
⼀、⽂件压缩的好处
前端⽣产环境中将js、css、图⽚等⽂件进⾏压缩的好处显⽽易见，通过减少数据传输量减⼩传输时间，节省服务器⽹络带宽，提⾼前端性能。
⼆、http协议如何⽀持压缩⽂件的传输
1、浏览器请求数据时，通过Accept-Encoding说明⾃⼰可以接受的压缩⽅法
2、服务端接收到请求后，选取Accept-Encoding中的⼀种对响应数据进⾏压缩
3、服务端返回响应数据时，在Content-Encoding字段中说明数据的压缩⽅式
4、浏览器接收到响应数据后根据Content-Encoding对结果进⾏解压
注：如果服务器没有对响应数据进⾏压缩，则不返回Content-Encoding，浏览器也不进⾏解压
三、什么时候压缩
四、服务器响应请求时压缩（nginx）
nginx中有关gzip的配置项如下：
gzip是什么文件夹
1、gzip on|off：默认off
开启或者关闭gzip模块
2、gzip_comp_level 4：默认1，建议选择为4
gzip压缩⽐/压缩级别，压缩级别 1-9，级别越⾼压缩率越⼤，压缩时间越长，消耗CPU也越⼤。
3、gzip_min_length  1k：默认0，不管页⾯多⼤都压缩
设置允许压缩的页⾯最⼩字节数，页⾯字节数从header头中的Content-Length中进⾏获取。
建议设置成⼤于1k的字节数，⼩于1k可能会越压越⼤。即: gzip_min_length 1024
4、gzip_static on|off：默认off
gzip_static是nginx对于静态⽂件的处理模块，可以读取预先压缩的gz⽂件，多与构建时压缩同时使⽤，详见下节构建时压缩介绍5、更多配置信息参考：
五、构建时压缩（webpack）
webpack的compression-webpack-plugin插件⽤于⽀持构建项⽬时压缩⽂件，Vue项⽬为例，具体配置如下：
1、⾸先安装插件，命令：npm install --save-dev compression-webpack-plugin
2、在config/index.js⽂件中打开Gzip开关，配置需要压缩的⽂件扩展名
3、f.js中设置具体压缩配置项
4、打包后会同时保留原⽂件和压缩后的⽂件，存储等条件允许的情况下，原⽂件也建议发布到服务器以⽀持不兼容gzip的浏览器
5、服务端nginx启动gzip_static
gzip_static是nginx对于静态⽂件的处理模块，该模块可以读取预先压缩的gz⽂件，这样可以减少每次请求进⾏gzip压缩的CPU资源消
耗。该模块启⽤后，nginx⾸先检查是否存在请求静态⽂件的gz结尾的⽂件，如果有则直接返回该gz⽂件内容。
为了要兼容不⽀持gzip的浏览器，启⽤gzip_static模块就必须同时保留原始静态⽂件和gz⽂件。这样的话，在有⼤量静态⽂件的情况下，将会⼤⼤增加磁盘空间。我们可以利⽤nginx的反向代理功能实现只保留gz⽂件（参考⽂章中提到本⽂未尝试）。
nginx需要安装http_gzip_static_module以⽀持gzip_static，具体⽅法见《》
六、⽣产环境：proxy_pass+gzip
上线后发现⽣产环境中静态⽂件的压缩配置没有起作⽤，经过定位发现⽣产环境加了反向代理导致nginx没有返回.gz⽂件。看到参考⽂章中⼆、三两篇时确定是gzip_http_version和proxy_set_header Accept-Encoding配置问题。
如果我们使⽤了proxy_pass进⾏反向代理，那么nginx和upstream server之间默认是⽤HTTP/1.0协议通信的。
如果我们的Cache Server也是nginx，⽽前端的nginx没有开启gzip。同时，我们后端的nginx上没有设置gzip_http_version为1.0，那么Cache的url将不会进⾏gzip压缩。
所以，最终的解决⽅案是，在静态⽂件服务nginx中配置gzip_http_version为1.0
同时，反向代理服务器应该添加请求头proxy_set_header Accept-Encoding ‘gzip’，通知静态⽂件服务器客户端能够理解的gzip压缩⽂件，使其返回.gz⽂件
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。