📦📦 unplugin Imagemin Picture compression

Important

Tips: 1.0 goals unplugin-imagemin is preparing to release version 1.0, which will be released after achieving the following goals

• Support all node versions by re-modifying the wasm syntax of squoosh
• remove sharp deps
• Type options
• start dev action
• add query search
• support css compress image
• Supports full cache mode
• Support Node 22 and more
• Supports farm, rsbuild, webpack, and other frameworks

Warning

New features and stability, compatibility and performance features are constantly being updated Recommended to use the latest version pnpm add unplugin-imagemin@latest -D

Warning

Since Google squoosh no longer maintains the node direction, This fock came out and revised some compatibility issues. Details squoosh-next

✨✨ Continuous iterative development in testing

✨ : unplugin-imagemin
✔ : Process start with mode squoosh
✅ : [test1.png] [12.39 MB] -> [102.54 KB]
✔ : Process start with mode squoosh
✅ : [test2.png] [16.38 MB] -> [76.79 KB]

🌈 Features

• 🍰 Support png jpeg webp avif svg tiff Format
• 🦾 High Performance based on squoosh
• ✨ Multiple picture formats can be configured
• 🪐 Compress the code at build time
• 😃 Caching Mechanism
• 🌈 You can convert different picture types at build time

Squoosh && Svgo

Unplugin-imagemin supports two compression modes

Squoosh is an image compression web app that reduces image sizes through numerous formats. Squoosh with rust & wasm

Svgo Support compression of pictures in svg format

🍰 Effect display

iShot_2023-09-18_16.41.04.mp4

📦 Installation

pnpm add unplugin-imagemin@latest -D

support vite and rollup.

Basic

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), imagemin()],
});

Advanced

iimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import imagemin from 'unplugin-imagemin/vite';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    imagemin({
      // Default configuration options for compressing different pictures
      compress: {
        jpg: {
          quality: 10,
        },
        jpeg: {
          quality: 10,
        },
        png: {
          quality: 10,
        },
        webp: {
          quality: 10,
        },
      },
      conversion: [
        { from: 'jpeg', to: 'webp' },
        { from: 'png', to: 'webp' },
        { from: 'JPG', to: 'jpeg' },
      ],
    }),
  ],
});

🌸 DefaultConfiguration

Squoosh DefaultConfiguration

DefaultConfiguration see DefaultConfiguration

Plugin property configuration see configuration

export interface PluginOptions {
  /**
   * @description Picture compilation and conversion
   * @default []
   */
  conversion?: ConversionItemType[];
  /**
   * @description Whether to turn on caching
   * @default true
   */
  cache?: boolean;
  /**
   * @description Cache folder directory read
   * @default node_modules/unplugin-imagemin/cache
   *
   */
  cacheDir?: string;
  /**
   * @description Compilation attribute
   * @default CompressTypeOptions
   */
  compress?: CompressTypeOptions;
}