English | 中文
A vite plugin for compressing image assets
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-imagemin -D
or
npm i vite-plugin-imagemin -D
Because imagemin is not easy to install in China. Several solutions are now available
- Use yarn to configure in package.json (recommended)
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
- Use npm, add the following configuration to the computer host file
199.232.4.133 raw.githubusercontent.com- Install with cnpm (not recommended)
- Configuration plugin in vite.config.ts
import viteImagemin from 'vite-plugin-imagemin'
export default () => {
return {
plugins: [
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 20,
},
pngquant: {
quality: [0.8, 0.9],
speed: 4,
},
svgo: {
plugins: [
{
name: 'removeViewBox',
},
{
name: 'removeEmptyAttrs',
active: false,
},
],
},
}),
],
}
}| params | type | default | default |
|---|---|---|---|
| verbose | boolean |
true |
Whether to output the compressed result in the console |
| filter | RegExp or (file: string) => boolean |
- | Specify which resources are not compressed |
| disable | boolean |
false |
Whether to disable |
| svgo | object or false |
- | See Options |
| gifsicle | object or false |
- | See Options |
| mozjpeg | object or false |
- | See Options |
| optipng | object or false |
- | See Options |
| pngquant | object or false |
- | See Options |
| webp | object or false |
- | See Options |
Run Example
npm run dev:play
npm run dev:build
MIT
