gzip 是一种优秀的压缩算法，我们可以在 HTTP 请求上对一些文本文件，设置 gzip 压缩。
服务端将响应头设置上 Content-encoding: gzip，表示当前资源会使用 gzip 压缩，提示客户端解压使用。
当然前提是客户端支持该压缩算法，服务端会通过客户端发送的请求头中的 Accept-Encoding 字段来确定是否支持
经过Gzip压缩后资源可以变为原来的30%甚至更小，尽管这样会消耗一定的cpu资源，但是会节约大量的出口带宽来提高访问速度
注意：不建议压缩图片和大文件：图片如jpg、png文件本身就会有压缩，所以就算开启gzip后，压缩前和压缩后大小没有多大区别，所以开启了反而会白白的浪费CPU资源。（如果优化可以可以图片的生命周期设置长一点，让客户端来缓存）
而大文件资源会消耗大量的cpu资源，且不一定有明显的效果。
一、前端安装 compression-webpack-plugin
npm i compression-webpack-plugin --save-dev
二、config配置，plugins新增：
const productionGzipExtensions = ['html', 'js', 'css'] //压缩的文件类型
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
三、 如果报错 可能是compression-webpack-plugin版本过高，和webpack存在兼容性问题，要么降低compression-webpack-plugin版本，要么升高webpack版本
四、Nginx 上开启 gzip
Nginx 默认是不开启 gzip 的，你需要这样设置：
http {
# 开启 gzip 压缩
gzip on;
# 使用 gzip 压缩的文件类型
# 此外，text/html 是自带的，不用写上
gzip_types text/plain text/css application/javascript application/json text/xml application/xml application/xml+rss;
# 小于 256 字节的不压缩
# 这是因为压缩是需要时间的，太小的话压缩收益不大
gzip_min_length 256;
# 开启静态压缩
# 压缩的资源会被缓存下来，下次请求时就直接使用缓存
gzip_static on;
}
五、查看是否成功
