提升nuxt2项目的性能
方法:采用新一代格式提供图片
原因:
1.WebP 和 AVIF 等图片格式的压缩效果通常优于 PNG 或 JPEG,因而下载速度更快,消耗的数据流量更少。https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/?utm_source=lighthouse&utm_medium=lr
操作:
1.把项目中的<img>改为 <nuxt-img> · Nuxt Image
2.添加上format='webp'属性
3.查看src属性是否需要修改
4.添加loading="lazy"属性
5.添加width和height属性
注意:
1.img标签可以不写 /;nuxt-img必须写 /
2.img标签的src使用相对路径时需要填写@/static/your-img-path;nuxt-img标签的src使用相对路径时会直接找到根目录下的static文件夹,所以只需填/your-img-path
3.如何判断format='webp'是否生效:
①图片路径是否有/f_webp
②HTTP响应的Content-Type头部如果为"image/webp",则表示图像已经以WebP格式返回给客户端
③不能通过图片路径的后缀来判断
4.网络图片无法通过添加format='webp'属性来修改格式