vite-dist-compress-image

Viteのビルド出力ディレクトリ内の画像を自動的に圧縮するプラグインです。

特徴

• 画像の自動圧縮（JPG, PNG, SVG）
• WebPとAVIFフォーマットの自動生成（オプション）
• SVGの最適化
• 除外パターンの指定が可能
• 圧縮品質のカスタマイズ
• 各フォーマットの有効/無効の制御
• 拡張子形式のカスタマイズ

主な機能

画像圧縮機能

• JPG/PNGの圧縮
  • 元の画像ファイルを圧縮
  • 圧縮品質をカスタマイズ可能
• WebP/AVIFの生成（オプション）
  • 各フォーマットを個別に有効/無効化可能
  • 拡張子形式をカスタマイズ可能
• SVGの最適化
  • SVGOを使用した最適化
  • SVGOの設定をカスタマイズ可能

カスタマイズ可能なオプション

• 圧縮品質の設定
  • 各フォーマット（JPG, PNG, WebP, AVIF）の品質を個別に設定
• SVGOの設定
  • SVGの最適化設定をカスタマイズ
• 除外パターンの指定
  • globパターンを使用して特定のファイルやディレクトリを除外
• フォーマット設定
  • WebPとAVIFの有効/無効を個別に制御
  • 拡張子形式のカスタマイズ

堅牢な実装

• パス処理の適切な実装
  • OSに依存しないパス処理
  • 安全なファイル操作
• エラーハンドリング
  • エラー発生時の適切な処理
  • エラーメッセージの出力
• 重複実行の防止
  • ビルド時の重複実行を防止
  • 効率的な処理の実現

インストール

npm install -D vite-dist-compress-image

使用方法

vite.config.js（またはvite.config.ts）に以下のように設定します：

import { defineConfig } from 'vite';
import compressImage from 'vite-dist-compress-image';

export default defineConfig({
  plugins: [
    compressImage({
      // オプション
    })
  ]
});

オプション

quality

各フォーマットの圧縮品質を指定します。

compressImage({
  quality: {
    jpg: 80,  // JPGの品質（0-100）
    png: 80,  // PNGの品質（0-100）
    webp: 80, // WebPの品質（0-100）
    avif: 45  // AVIFの品質（0-100）
  }
})

デフォルト値：

• jpg: 80
• png: 80
• webp: 80
• avif: 45

svgoConfig

SVGの最適化設定を指定します。SVGOの設定オプションを使用できます。

compressImage({
  svgoConfig: {
    multipass: true,
    plugins: [
      'preset-default',
      {
        name: 'removeViewBox',
        active: false
      }
    ]
  }
})

exclude

圧縮処理から除外するファイルやディレクトリを指定します。globパターンを使用できます。

compressImage({
  exclude: [
    '**/icons/**',     // iconsディレクトリ内のファイルを除外
    '**/*.min.*',      // すでに圧縮済みのファイルを除外
    '**/original/**'   // originalディレクトリ内のファイルを除外
  ]
})

webp

WebPフォーマットの設定を指定します。

compressImage({
  webp: {
    enabled: true,     // WebPの生成を有効化
    extension: 'append'  // 'append': .jpg.webp, 'replace': .webp
  }
})

デフォルト値：

• enabled: true
• extension: 'append'（例：image.jpg.webp、image.png.webp）

avif

AVIFフォーマットの設定を指定します。

compressImage({
  avif: {
    enabled: true,     // AVIFの生成を有効化
    extension: 'append'  // 'append': .jpg.avif, 'replace': .avif
  }
})

デフォルト値：

• enabled: true
• extension: 'append'（例：image.jpg.avif、image.png.avif）

使用例

WebPのみを生成する場合

compressImage({
  webp: {
    enabled: true,
    extension: 'append'
  },
  avif: {
    enabled: false
  }
})

両方のフォーマットを生成し、拡張子を置き換える場合

compressImage({
  webp: {
    enabled: true,
    extension: 'replace'
  },
  avif: {
    enabled: true,
    extension: 'replace'
  }
})

出力

• 元の画像ファイルが圧縮されます
• 有効化されたフォーマット（WebP/AVIF）のファイルが生成されます
• SVGファイルは最適化されます

注意事項

• このプラグインはビルド出力ディレクトリ（distなど）内の画像を処理します
• 元の画像ファイルは上書きされます
• 圧縮処理はcloseBundleフックで実行されます

ライセンス

MIT