手摸手优化:gizp
gizp
是否使用对比分析
是否使用gzip | 打包文件大小 | http请求js文件大小 | 实际需要的时间 |
---|---|---|---|
否 | 13M | 770kb | 162ms |
是 | 5.5M | 206kB | 49ms |
1、客户端配置gzip
webpack配置gzip,客户端提前打包成.gz文件, 此操作选择配置(也可以不配置)
使用webpack
插件配置gzip
,高版本会出错,安装5.0.1版本
npm i compression-webpack-plugin@5.0.1 -D
在vue.config.js
内
//gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');//引入compression-webpack-plugin
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: "[path].gz[query]", //目标资源名称
algorithm: "gzip",
test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
threshold: 10240,//只处理比这个值大的资源。按字节计算(设置10K以上进行压缩)
minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
})
]
}
}
2、nginx配置gzip
http {
# ----------------------------- gzip start -----------------------------
#开启和关闭gzip模式
gzip on;
#gizp压缩起点,文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
gzip_comp_level 5;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
#nginx对于静态文件的处理模块,开启后会寻找以.gz结尾的文件,直接返回,不会占用cpu进行压缩,如果找不到则不进行压缩
gzip_static on;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
# 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区
gzip_buffers 2 4k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# ----------------------------- gzip end -----------------------------
}
注意点 gzip_static on;
此属性开启后,说白了就是会优先查找前端打包后的.gz文件。
先为ngxin
安装gzip_static
模块
## 配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
## 重新安装
make && make install
最后重启nginx
就生效了
./nginx -s reload
3、效果
4、题外话-Brotli
基于
2021-7-5
1、淘宝、Jd官网都用的gzip
- 使用 Brotli 压缩的 Javascript 文件比 gzip 小 14%。
- HTML 文件比 gzip 小 21%。
- CSS 文件比 gzip 小 17%。 参考-Brotli与gzip比较
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfgaefj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01