1 gzip的压缩效果是立竿见影的:
2 网站是否开启gzip的查看方式
2.1 打开chrome浏览器,按 f12打开调试面板
2.2 切换到network页签,在网络请求列表的表头分组游戏,鼠标右键==>respon headers==>content encoding
这一栏如果显示gzip,证明启用了gzip压缩。
3. gzip压缩方案
3.1 方案一 前端打包构建时进行gzip压缩
3.1.1 安装插件
compression-webpack-plugin
yarn add -d compression-webpack-plugin@5.0.尾巴1
3.1.2 在webpack中配置
compression-webpack-plugin
const compressionplugin = require(‘compression-webpack-plugin’);
module.exports = {
plugins: [
new compressionplugin({
algorithm: ‘gzip’, // 使用gzip压缩
test: /.js$|.html$|.css$/, // 匹配文件名
filename: ‘[path].gz[query]’, // 压缩后的文件名(保持原文件名,后缀加.gz)
minratio: 0.8, // 压缩率小于0.8才会压缩
threshold: 10240, // 对超过10k的数据压缩
deleteoriginalasts: fal, // 是否删除未压缩的源文件
}),
],
},
};
3.1.3 在nginx中配置加载静态的本地gz文件
nginx 静态压缩需要使用
ngx_http_gzip_static_module 模块,nginx_http_gzip_static_module 模块允许发送扩展名为 .gz 的预压缩文件,而不是常规文件。默认情况下未构建此模块,应使用 –with-http_gzip_static_module 配置参数启用它 。重新编译nginx,添加参数–with-http_gzip_static_module
./configure –with-http_gzip_static_module
然后修改 nginx.conf 配置文件:
http {
include mime.types;
default_type application/octet-stream;
#提高服务器读写文件性能
ndfi苏武牧羊le on;
#tcp_nopush on;
keepalive_timeout 65;
# 开启gzip
gzip_static on;
rver {
listen 8462;
rver_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
3.2 方案二 服务器在线gzip压缩
http {
include mime.types;
default_type application/octet-stream;
#提高服务器读写文件性能
ndfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启gzip
gzip on;
#压缩级别官网建议是6 数字越大压缩的越好,也越占用cpu时间
#1.随着压缩级别的升高,压缩比有所提高,但到了级别6后,很难再提高;
#2.随着压缩级别的升高,处理时间明显变慢;
#3.gzip很消耗cpu的性能,高并发情况下cpu达到100%
gzip_comp_level 6;
# 压缩的类型 html,css,xml,js,php
# 二进制资源:例如图片/mp3这样的二进制文件,不必压缩;因为压缩率比较小, 比如100->80字节,而且压缩也是耗费cpu吴伟定资源的.
# text/javascript是ie6,7,8才能识别的js标签
gzip_types text/plain text/css application/xml application/javascript text/javascript application/x-httpd-php;
#nginx用作反向代理时启用
#off – 关闭所有的代理结果数据压缩
#expired – 如果header中包含”expires”头信息,启用压缩
#no-cache – 如果header中包含”cache-control:no-cache”头信息,启用压缩
#no-store – 如果header中包含”cache-control:no-store”头信息,启用压缩
#private – 如果he校联ader中包含”cache-control:private”头信息,启用压缩
#no_last_modified – 启用压缩,如果header中包含”last_modified”头信息,启用压缩
#no_etag – 启用压缩,如果header中包含“etag”头信息,启用压缩
#auth – 启用压缩,如果header中包含“authorization”头信息,启用压缩
#any – 无条件压缩所有结果数据
gzip_proxied off
# 是否在http header中添加vary: accept-encoding,建议开启
gzip_vary on
# 设置用于处理请求压缩的缓冲区数量和大小
gzip_buffers 4 16k;
# 大于多少字节进行压缩,以k为单位,当值为0时,所有页面都进行压缩
gzip_min_length 10
# 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议)
gzip_http_version 1.1;
# 配置禁用gzip条件,可以不设置,目前几乎没有ie6,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
gzip_disable “msie [1-6].”;
rver {
listen 8462;
rver_name localhost;
location / {
root dist;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
4.两种方案的优缺点:
1.在前端进行gzip压缩,不耗服务器性能,但需要重新编译nginx,添加gzip_static模块。
2.使用nginx实时进行gzip压缩,缺点就是耗性能,对于前端而言的优点是什么都不用管,因为有时候前端不一定有nginx的配置修改权限。
本文发布于:2023-04-05 08:38:32,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/5d22ac772293872e2c67f758cba40be6.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:gzip可压缩命令(linux入门基础).doc
本文 PDF 下载地址:gzip可压缩命令(linux入门基础).pdf
留言与评论(共有 0 条评论) |