一、前言
最近做了几个静态站,图片资源是放在项目中打包出来的,而在通过google网站测试时在图片大小方面拉低了网站分数并建议使用更适合html5的webp格式,因此本文将介绍静态站如何压缩图片大小并改变图片格式为webp。
二、实现
1、下载转换图片格式的依赖
yarn add imagemin imagemin-webp
2、vite配置,打包时对图片格式进行修改和压缩
// vite.config.ts
import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';
import path from 'path';
import { readdirSync, lstatSync, unlinkSync } from 'fs';
export default defineConfig({
plugins: [
vue(),
{
name: 'webp-converter',
apply: 'build',
async generateBundle() {
// 需修改:存储图片的文件夹相对于项目根目录的路径
const imgDirPath = 'img';
// 读取文件夹
const files = readdirSync(imgDirPath);
// 筛选出需要处理的图片
const images = files.filter(file => {
const filePath = path.join(imgDirPath, file);
return lstatSync(filePath).isFile() && /\.(jpg|jpeg|png)$/i.test(file);
});
// 考虑到计算机运存,设置最大并发处理数量,递归执行,否则可能会打包失败
const maxConcurrent = 5;
let index = 0;
const processNext = async () => {
if (index >= images.length) return;
const image = images[index++];
const inputFilePath = path.join(imgDirPath, image);
try {
await imagemin([inputFilePath], {
destination: imgDirPath,
plugins: [
imageminWebp({
quality: 75 // 设置输出的 WebP 质量
})
]
});
// 看需求是否要删除原始图片
// unlinkSync(inputFilePath);
} catch (error) {
console.error(`Error processing ${inputFilePath}:`, error);
}
await processNext();
};
const tasks = Array.from({ length: maxConcurrent }, processNext);
await Promise.all(tasks);
},
}
],
// ...
})
3、懒加载配置(如果项目读取图片使用的懒加载)
安装懒加载依赖
yarn add vue-lazyload
配置指令
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
// 懒加载的默认图
import lazy_img from './assets/lazy.jpg'
// 判断浏览器是否支持 webp
const isWebpSupported = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
const app = createApp(App)
app.use(VueLazyload, {
loading: lazy_img,
filter: {
webp(listener) {
if (isWebpSupported) {
// 仅对路径以 'img/' 开头且是 png、jpg、jpeg 格式的图片进行webp转换
if (/\.(png|jpe?g)$/.test(listener.src)) {
listener.src = listener.src.replace(/\.\w+$/, '.webp');
}
}
}
}
})
// ...
app.mount('#app')
<img v-lazy="imgPath" :alt="imgName">
4、对于非懒加载的图片(例如logo)
手动实现一个获取webp格式图片的工具方法,在使用静态图片时使用
// utils/common.ts
export function loadWebpImg(src:string):string{
if (/\.(png|jpe?g)$/.test(src)) {
let link = src
const isWebpSupported = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
if (isWebpSupported) {
// 仅对路径以 'img/' 开头且是 png、jpg、jpeg 格式的图片进行webp转换
if (/\.(png|jpe?g)$/.test(link)) {
link = link.replace(/\.\w+$/, '.webp');
}
}
return link
}
return src
}
<img :src="loadWebpImg(imgPath)" :alt="itemName" />