vue3+vite实现静态站图片资源的压缩和格式转换（webp）

一、前言

最近做了几个静态站，图片资源是放在项目中打包出来的，而在通过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" />