一、文件压缩的好处
前端生产环境中将js、css、图片等文件进行压缩的好处显而易见，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。
二、http协议如何支持压缩文件的传输
1、浏览器请求数据时，通过Accept-Encoding说明自己可以接受的压缩方法
2、服务端接收到请求后，选取Accept-Encoding中的一种对响应数据进行压缩
3、服务端返回响应数据时，在Content-Encoding字段中说明数据的压缩方式
4、浏览器接收到响应数据后根据Content-Encoding对结果进行解压
注：如果服务器没有对响应数据进行压缩，则不返回Content-Encoding，浏览器也不进行解压
三、什么时候压缩
四、服务器响应请求时压缩（nginx）
nginx中有关gzip的配置项如下：
1、gzip_static on|off：默认off
nginx对于静态文件的处理模块
该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容。为了要兼容不支持gzip的浏览器，启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的情况下，将会大大增加磁盘空间。我们可以利用nginx的反向代理功能实现只保留gz文件。
2、gzip on|off：默认off
开启或者关闭gzip模块
3、gzip_comp_level 4：默认1，建议选择为4
gzip压缩比/压缩级别，压缩级别 1-9，级别越高压缩率越大，压缩时间越长，消耗CPU也越大。
4、gzip_min_length 1k：默认0，不管页面多大都压缩
设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。
建议设置成大于1k的字节数，小于1k可能会越压越大。 即: gzip_min_length 1024
5、更多配置信息参考：Nginx的gzip
五、构建时压缩（webpack）
webpack的compression-webpack-plugin插件用于支持构建项目时压缩文件，Vue项目为例，具体配置如下：
1、首先安装插件，命令：npm install --save-dev compression-webpack-plugin
2、在config/index.js文件中打开Gzip开关，配置需要压缩的文件扩展名
3、webpack.prod.conf.js中设置具体压缩配置项
4、打包后会同时保留原文件和压缩后的文件，存储等条件允许的情况下，原文件也建议发布到服务器以支持不兼容gzip的浏览器
