开发日志2023.06.21

提升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'属性来修改格式