前端工程师小工具|前端性能优化gzip压缩性能优化|Web优化|cdn加速|vend

GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。
HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。
开始动工：
1、nginx相关配置
gzip使用环境:http,server,location,if(x),一般把它定义在nginx.conf的http{…..}之间

gzip on
on为启用，off为关闭
gzip_min_length 1k
设置允许压缩的页面最小字节数，页面字节数从header头中的Content-Length中进行获取。默认值是0，不管页面多大都压缩。建议设置成大于1k的字节数，小于1k可能会越压越大。
gzip_buffers 4 16k
获取多少内存用于缓存压缩结果，‘4 16k’表示以16k*4为单位获得
gzip_comp_level 5
gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
对特定的MIME类型生效,其中'text/html’被系统强制启用
gzip_http_version 1.1
识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
gzip_vary on
启用应答头"Vary: Accept-Encoding"
gzip_proxied off
nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
gzip_disable msie6
(IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库

文章图片

2、前端安装 compression-webpack-plugin
npm i compression-webpack-plugin --save-dev
3、config配置，plugins新增：

new CompressionWebpackPlugin({ asset: '[path].gz[query]',// 目标文件名 algorithm: 'gzip',// 使用gzip压缩 test: new RegExp( '\\.(js|css)$' // 压缩 js 与 css ), threshold: 10240,// 资源文件大于10240B=10kB时会被压缩 minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩 }),

当然，别忘了先引入 var CompressionWebpackPlugin= require('compression-webpack-plugin');
4、再执行打包命令；run build
等等，报错了？？不慌继续走，，，
5、

options has an unknown property 'asset'. These properties are valid:

修改：将config的plugins的asset修改为filename，再执行打包

new CompressionWebpackPlugin({ filename: '[path].gz[query]',// 目标文件名 algorithm: 'gzip',// 使用gzip压缩 test: new RegExp( '\\.(js|css)$' // 压缩 js 与 css ), threshold: 10240,// 资源文件大于10240B=10kB时会被压缩 minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩 }),

6、又报错了，

TypeError:Cannot read property 'thisCompilation' of undefined

修改：这是因为compression-webpack-plugin @9.2.0 版本过高，和webpack存在兼容性问题，要么降低compression-webpack-plugin版本，要么升高webpack版本，这里采用compression-webpack-plugin降低版本方法，再执行打包

"compression-webpack-plugin": "^1.1.12",

7、打包成功，效果相当显著，再原来的webpack打包压缩的基础上又执行压缩到76%；

文章图片

8、执行部署到服务端，可是还是不生效；

文章图片

9、此时，前端的部署改造已经完成，这是nginx中gzip_types 配置问题；
application/x-javascript需要把x-去掉~，JavaScript的MIME类型通常为“application/x-javascript”, 非IE的浏览器认“application/javascript”,用“text/javscript”最通用，因为type可以不指定默认是"text/javascript"
10、gzip生效