vite-plugin-image-compress-l

使用 sharp 库实现的 Vite 图片压缩插件，支持在构建时自动压缩项目中的图片资源。

特性

• 支持多种图片格式：JPEG, PNG, WebP, AVIF, GIF, TIFF
• 可配置压缩质量
• 支持图片尺寸限制
• 构建时自动压缩
• 输出压缩统计信息

安装

npm install vite-plugin-image-compress-l sharp --save-dev
# 或
pnpm add vite-plugin-image-compress-l sharp -D
# 或
yarn add vite-plugin-image-compress-l sharp -D

使用方法

基础用法

// vite.config.ts
import { defineConfig } from 'vite';
import imageCompress from 'vite-plugin-image-compress';

export default defineConfig({
  plugins: [
    imageCompress()
  ]
});

配置选项

import imageCompress from 'vite-plugin-image-compress';

imageCompress({
  // JPEG 压缩质量 (1-100)，默认 80
  jpegQuality: 80,

  // PNG 压缩级别 (0-9)，默认 6
  pngCompressionLevel: 6,

  // WebP 压缩质量 (1-100)，默认 80
  webpQuality: 80,

  // AVIF 压缩质量 (1-100)，默认 50
  avifQuality: 50,

  // GIF 压缩质量，默认 100
  gifQuality: 100,

  // 最大宽度，超过则等比缩放
  maxWidth: 1920,

  // 最大高度，超过则等比缩放
  maxHeight: 1080,

  // 是否禁用压缩，默认 false
  disable: false,

  // 要排除的图片路径（支持 glob 模式）
  exclude: ['**/icon*.png', '**/logo.*'],

  // 是否在控制台输出压缩信息，默认 true
  verbose: true
})

在 Vue 项目中使用

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imageCompress from 'vite-plugin-image-compress';

export default defineConfig({
  plugins: [
    vue(),
    imageCompress({
      jpegQuality: 75,
      pngCompressionLevel: 9,
      webpQuality: 75,
      verbose: true
    })
  ]
});

在 React 项目中使用

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import imageCompress from 'vite-plugin-image-compress';

export default defineConfig({
  plugins: [
    react(),
    imageCompress({
      jpegQuality: 80,
      maxWidth: 2048,
      exclude: ['**/static/**']
    })
  ]
});

构建输出示例

[vite-plugin-image-compress] 压缩: assets/logo.png
  256.32 KB --> 128.15 KB  50.00%

========== 图片压缩统计 ==========
共压缩 15 张图片
原始总大小: 2048.56 KB
压缩后总大小: 1024.28 KB
总体压缩率: 50.00%
===================================

注意事项

1. sharp 依赖: 插件依赖 sharp 库，需要在项目中安装
2. 构建时运行: 插件只在 vite build 时生效，开发模式下不会压缩
3. 只压缩更小的文件: 插件只会替换比原始文件更小的压缩结果
4. 图片格式: 不会改变图片格式，只进行压缩处理

与其他插件配合

// vite.config.ts
import { defineConfig } from 'vite';
import imageCompress from 'vite-plugin-image-compress';
import visualizer from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    imageCompress(),
    // 其他插件...
  ]
});

许可证

MIT