# npm
npm install vite-plugin-image-optimizer --save-dev
# yarn/pnpm
yarn add vite-plugin-image-optimizer -D
pnpm add vite-plugin-image-optimizer -D

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

export default defineConfig({
  plugins: [
    ViteImageOptimizer({
       png: {
        quality: 80 // 質(zhì)量（0-100，值越高越清晰，體積越大）
      },
      jpeg: { quality: 80 },
      webp: {
        quality: 80,
        lossless: false
      },
      avif: { quality: 75 }, // AVIF 壓縮率比 WebP 更高，但兼容性稍弱
      include: /\.(png|jpe?g|svg)$/i, // 僅處理指定格式
      exclude: /node_modules/ // 排除 node_modules 目錄
    }),
  ],
});

# 核心插件 + 常用格式壓縮插件
npm install rollup-plugin-imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-webp imagemin-avif --save-dev

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

export default defineConfig({
  plugins: [
    imagemin({
      // 壓縮插件集合（按格式配置）
      plugins: [
        // GIF 壓縮：optimizationLevel 1-3（3 最優(yōu)）
        imagemin.gifsicle({ optimizationLevel: 3 }),
        // JPEG 壓縮：quality 0-100，progressive 啟用漸進式加載
        imagemin.mozjpeg({ quality: 80, progressive: true }),
        // PNG 壓縮：quality [最小質(zhì)量, 最大質(zhì)量]，speed 壓縮速度（1-11，1 最慢最優(yōu)）
        imagemin.pngquant({ quality: [0.7, 0.8], speed: 4 }),
        // 自動轉(zhuǎn)換 PNG/JPG 為 WebP
        imagemin.webp({ quality: 80 }),
        // 自動轉(zhuǎn)換為 AVIF（壓縮率更高）
        imagemin.avif({ quality: 75 }),
      ],

      // 高級配置：過濾文件
      include: /.(png|jpe?g|gif)$/i,
      exclude: /public/icons/, // 排除無需壓縮的目錄（如小圖標(biāo)）
    }),
  ],
});

npm install vite-plugin-compress --save-dev

import { defineConfig } from 'vite';
import compress from 'vite-plugin-compress';

export default defineConfig({
  plugins: [
    compress({
      // 1. 啟用圖片壓縮（默認(rèn) false，需手動開啟）
      image: true,

      // 2. 圖片壓縮參數(shù)（僅支持傳統(tǒng)格式）
      imageOptions: {
        mozjpeg: { quality: 80 }, // JPEG 壓縮
        pngquant: { quality: [0.7, 0.8] }, // PNG 壓縮
        gifsicle: { optimizationLevel: 3 }, // GIF 壓縮
      },

      // 3. 代碼壓縮配置（插件核心能力，可選）
      gzip: true, // 啟用 GZIP 壓縮 JS/CSS
      brotli: true, // 啟用 Brotli 壓縮（比 GZIP 壓縮率更高）
    }),
  ],
});

# imagemin 核心庫 + 常用格式壓縮插件
npm install imagemin imagemin-pngquant imagemin-mozjpeg imagemin-gifsicle --save-dev

import { defineConfig } from 'vite';
import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminGifsicle from 'imagemin-gifsicle';
import { resolve } from 'path'; // 路徑處理工具

export default defineConfig({
  build: {
    // 構(gòu)建完成后執(zhí)行圖片壓縮（異步鉤子）
    async onEnd() {
      try {
        // 1. 配置需要壓縮的圖片路徑（glob 語法）
        const inputDir = resolve(__dirname, 'dist/assets/**/*.{png,jpg,jpeg,gif}');
        // 2. 壓縮后的輸出目錄（此處與輸入目錄一致，即覆蓋原文件）
        const outputDir = resolve(__dirname, 'dist/assets');

        // 3. 執(zhí)行壓縮
        await imagemin([inputDir], {
          destination: outputDir,
          plugins: [
            imageminPngquant({ quality: [0.7, 0.8] }),
            imageminMozjpeg({ quality: 80 }),
            imageminGifsicle({ optimizationLevel: 3 }),
          ],
        });

        console.log('? 圖片壓縮完成！');
      } catch (error) {
        console.error('? 圖片壓縮失?。?, error);
      }
    },
  },
});

<picture>
  <!-- 優(yōu)先加載 AVIF -->
  <source srcset="image.avif" type="image/avif">
  <!-- 其次加載 WebP -->
  <source srcset="image.webp" type="image/webp">
  <!-- 降級加載 PNG/JPG -->
  <img src="image.png" alt="示例圖片">
</picture>