网站性能优化分2个目标
- 更小的传输体积
- 更快的传输速度
更小的传输体积
图片压缩
使用tinify进行图片压缩
为什么选择tinify?
参考: TinyPNG – Compress WebP, PNG and JPEG images intelligently
采用例如tinify工具对png和jpeg进行压缩,在效果肉眼无法区分的情况下,可以降低体积
npm run build时,webpack也会对超过244KB的文件进行warning,提醒你缩减体积。
批量压缩
这里采用脚本批量压缩。
获取API KEY。
在官网注册一个,然后通过邮件里的链接获取API KEY
官方通过这个方式限制500次调用,达到商业变现的能力。
python脚本实例
import tinify
from pathlib import Path
tinify.key = "XXXXXXXXXXXXXXXXXXXXXXXXXX"
for img_type in ("png", "jpg"):
all_imgs = Path("./src").glob(f"**/*.{img_type}")
for each in all_imgs:
print(each)
source = tinify.from_file(each)
source.to_file(each)
在前端的根目录运行它,例如 python tools/tinify/tinify_all.py
文字压缩
nginx采用gzip压缩
我们的网站通过nginx进行发布,对于文字类文件,采用gzip压缩可以较大的降低文件体积。
nginx的gzip配置参考,Module ngx_http_gzip_module
我们的gzip配置为
gzip on;
gzip_vary on;
gzip_comp_level 6; #default 1, large is better, but cpu load increase
#gzip_min_length 1k; #default 20
gzip_proxied any;
#gzip_buffers 4 16k;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css application/json application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
测试度量
推荐采用免费的k6云进行测试,参考http://docs.paic.com.cn/#/space/7194716/post/14023026 里的网站测试部分。
可以生成性能报告等 Executive Summary - chaoyinsi_dev_iobs_attname.pdf