如何配置Sharp实现图片格式转换压缩及Vite适配方案

一、纯Sharp原生代码实现 #

你的原代码存在几个核心问题：

• Sharp构造函数需要传入具体文件路径，不能直接写文件类型字符串
• toFormat 一次只能输出一种格式，无法同时生成WebP和AVIF
• Sharp没有svg()方法，SVG压缩需要用内置的SVGO配置
• toFile 必须指定具体文件名，不能只传目录路径

以下是可运行的完整代码，实现遍历目录、分类型处理图片：

import sharp from 'sharp';
import { readdir, stat, mkdir } from 'fs/promises';
import { join, extname, basename } from 'path';

const srcDir = 'src/images';
const distDir = 'dist/assets/images';

// 确保输出目录存在
await mkdir(distDir, { recursive: true });

// 遍历源目录所有文件
const files = await readdir(srcDir);
for (const file of files) {
  const srcPath = join(srcDir, file);
  const fileStat = await stat(srcPath);
  if (!fileStat.isFile()) continue; // 跳过子目录

  const ext = extname(file).toLowerCase();
  const baseName = basename(file, ext);

  // 处理JPG/PNG：生成WebP、AVIF并压缩（质量75=压缩25%）
  if (['.jpg', '.jpeg', '.png'].includes(ext)) {
    const image = sharp(srcPath);
    // 生成WebP格式
    await image.clone()
      .webp({ quality: 75 })
      .toFile(join(distDir, `${baseName}.webp`));
    // 生成AVIF格式
    await image.clone()
      .avif({ quality: 75 })
      .toFile(join(distDir, `${baseName}.avif`));
    // 可选：保留原格式的压缩版本
    await image.clone()
      .jpeg({ quality: 75 })
      .png({ quality: 75 })
      .toFile(join(distDir, file));
  } 
  // 处理SVG：仅压缩不转格式
  else if (ext === '.svg') {
    await sharp(srcPath)
      .svg({
        multipass: true,
        cleanupAttrs: true,
        removeDoctype: true,
        removeComments: true,
        removeMetadata: true,
        cleanupIDs: true,
        mergePaths: true,
        sortAttrs: true
      })
      .toFile(join(distDir, file));
  }
}

注：使用clone()是因为Sharp的链式操作会修改实例本身，每次生成不同格式需要克隆新实例；SVG的配置是Sharp内置的SVGO压缩参数，可根据需求增减。

二、Vite环境下的简便实现 #

在Vite中无需手动编写Sharp逻辑，直接用现成插件自动处理图片，推荐两个常用选项：

1. vite-plugin-imagemin #

安装依赖：

npm install vite-plugin-imagemin --save-dev

修改Vite配置文件（vite.config.js/ts）：

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      // JPG/PNG压缩配置
      mozjpeg: { quality: 75 },
      pngquant: { quality: [0.6, 0.75] },
      // 自动生成WebP、AVIF
      webp: { quality: 75 },
      avif: { quality: 75 },
      // SVG压缩配置
      svgo: {
        plugins: [
          { name: 'removeViewBox' },
          { name: 'cleanupIDs', active: false }
        ]
      }
    })
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets/images' // 指定图片输出目录
  }
});

2. vite-plugin-image-optimizer（轻量版） #

安装依赖：

npm install vite-plugin-image-optimizer --save-dev

修改Vite配置文件：

import { defineConfig } from 'vite';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
  plugins: [
    ViteImageOptimizer({
      png: { quality: 75 },
      jpeg: { quality: 75 },
      webp: { quality: 75 },
      avif: { quality: 75 },
      svg: {
        plugins: [{ name: 'preset-default' }]
      },
      outputDir: 'dist/assets/images'
    })
  ]
});

注：这两个插件会在Vite构建时自动扫描项目中的图片，完成压缩、转格式操作，无需手动遍历目录，对新手更友好。

内容的提问来源于stack exchange，提问作者Michael