gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，对于用户量多的网站，开启gizp压缩会大大降低服务器压力，提高加载速度，降低服务器流量成本 有两种开启方式
gzip配置的常用参数 - gzip on|off; #是否开启gzip - gzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?) - gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源) - gzip_disable #正则匹配UA 什么样的Uri不进行gzip - gzip_min_length 200 # 开始压缩的最小长度(再小就不要压缩了,意义不在) - gzip_http_version 1.0|1.1 # 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议) - gzip_proxied # 设置请求者代理服务器,该如何缓存内容 - gzip_types text/plain application/xml # 对哪些类型的文件用压缩 如txt,xml,html ,css - gzip_vary on|off # 是否传输gzip压缩标志
注意： 图片/mp3这样的二进制文件,不必压缩 因为压缩率比较小, 比如100->80字节,而且压缩也是耗费CPU资源的. 比较小的文件不必压缩
第一种方式
vue-cli生成的项目
- 安装 compression-webpack-plugin 插件
cnpm install compression-webpack-plugin --save-dev
vue.config.js配置Gzip压缩
configureWebpack: config => {
// 开发环境不需要gzip
if (process.env.NODE_ENV !== 'production') return
config.plugins.push(
new CompressionWebpackPlugin({
// 正在匹配需要压缩的文件后缀
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大于10kb的会压缩
threshold: 10240
// 其余配置查看compression-webpack-plugin
})
)
}
-
npm run build 之后，对比之前的大小有明显的提升
-
nginx配置gizp
listen 4300;
server_name localhost;
location / {
root /home/static/web/wechat;
index /index.html;
try_files $uri $uri/ /index.html;
gzip_static on; #静态压缩
}
}
- 第一种方式需要前端工程打包成Gzip,然后nginx开启Gzip模块
第二种方式
这种方式直接采用nginx进行Gzip化
- nginx配置gizp
- 在nginx.conf文件夹的http里面配置数据
- gzip on; #开启或关闭gzip on off
- gzip_min_length 5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
- gzip_buffers 4 16k; #buffer 不用修改
- gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
- gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
- gzip_vary on; # 和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩
开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 1;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
通过启动项目查看newwork资源中的请求头是否有【Response Headers-> Content-Encoding:gzip】
