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
āØ : 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]
- š° 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
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
pnpm add unplugin-imagemin@latest -D
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'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), imagemin({ // default true cache: false, // 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' }, ], }), ], });
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 Path to the cache file location * @default ./node_modules/.cache/unplugin-imagemin/.unplugin-imagemin-cache */ cacheLocation?: string; /** * @description Compilation attribute * @default CompressTypeOptions */ compress?: CompressTypeOptions; }