📦📦 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
• support compress publicDir images
• support css compress image
• Supports full cache mode
• Support Node 22 and more
• Type options
• 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

1✨ : unplugin-imagemin
2✔ : Process start with mode squoosh
3✅ : [test1.png] [12.39 MB] -> [102.54 KB]
4✔ : Process start with mode squoosh
5✅ : [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 tools

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

📦 Installation

1pnpm add unplugin-imagemin@latest -D

support vite and rollup

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

1iimport { defineConfig } from 'vite';
2import vue from '@vitejs/plugin-vue';
3import imagemin from 'unplugin-imagemin/vite';
4import path from 'path';
5// https://vitejs.dev/config/
6export default defineConfig({
7  plugins: [
8    vue(),
9    imagemin({
10      // Default configuration options for compressing different pictures
11      compress: {
12        jpg: {
13          quality: 10,
14        },
15        jpeg: {
16          quality: 10,
17        },
18        png: {
19          quality: 10,
20        },
21        webp: {
22          quality: 10,
23        },
24      },
25      conversion: [
26        { from: 'jpeg', to: 'webp' },
27        { from: 'png', to: 'webp' },
28        { from: 'JPG', to: 'jpeg' },
29      ],
30    }),
31  ],
32});
33

🌸 DefaultConfiguration

Squoosh DefaultConfiguration

DefaultConfiguration see DefaultConfiguration

Plugin property configuration see configuration

1export interface PluginOptions {
2  /**
3   * @description Picture compilation and conversion
4   * @default []
5   */
6  conversion?: ConversionItemType[];
7  /**
8   * @description Whether to turn on caching
9   * @default true
10   */
11  cache?: boolean;
12  /**
13   * @description Path to the cache file location
14   * @default ./node_modules/.cache/unplugin-imagemin/.unplugin-imagemin-cache
15   */
16  cacheLocation?: string;
17  /**
18   * @description Compilation attribute
19   * @default CompressTypeOptions
20   */
21  compress?: CompressTypeOptions;
22}