vite-plugin-imagemin-vv v1.1.4
vite-plugin-imagemin-vv
中文 | English
Description
A vite plugin developed based on imagemin, which can automatically obtain the specified type of image files under the specified path and compress them when run build.
Install
yarn add vite-plugin-imagemin-vv -Dor
npm i vite-plugin-imagemin-vv -DUsage
import viteImagemin from 'vite-plugin-imagemin'
...
export default defineConfig({
plugins: [
viteImagemin()
]
})Config
| params | type | default | description |
|---|---|---|---|
| imgPath | Array | 'src/assets' | List of image files |
| imgType | Array | 'jpg', 'png', 'svg', 'gif', 'jpeg' | List of image types to be compressed |
| open | boolean | true | set false will skip this plugin |
| ignoreImagePath | Array | '' | if you want to skipsrc/assets/configjust set ['config'] |
| pluginConfig | object | - | ↓ |
| pluginConfig.gifsicle | object | ↓ | see Official |
| pluginConfig.optipng | object | ↓ | see Official |
| pluginConfig.mozjpeg | object | ↓ | see Official |
| pluginConfig.pngquant | object | ↓ | see Official |
| pluginConfig.svgo | object↓ | ↓ | see Official |
| pluginConfig.webp | object↓ | ↓ | see Official |
viteImagemin({
imgPath: ['src/assets'],
imgType: ['jpg', 'png', 'svg', 'gif', 'jpeg'],
open: true,
ignoreImagePath: [''],
pluginConfig: {
gifsicle: {
optimizationLevel: 7,
},
optipng: {
optimizationLevel: 7,
},
mozjpeg: {
quality: 50,
},
pngquant: {
quality: [0.7, 0.8],
speed: 4,
},
svgo: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
inlineStyles: {
onlyMatchedOnce: false,
},
},
},
},
],
},
webp: false
}
})Notes
imagemin contains well-known libs such as pngquant and mozjpeg , it need to download binary files.Chinese developers may fail to install due to some network problems. There are some solutions.
1、use resolutions and bin-wrapper-china(recommend)
bin-wrapper-china:https://github.com/best-shot/bin-wrapper-china
blog:http://t.zoukankan.com/Chary-p-13862863.html
resolutions:https://github.com/yarnpkg/rfcs/blob/master/implemented/0000-selective-versions-resolutions.md
// package.json
{
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
}
}2、use cnpm(not recommend)
cnpm i vite-plugin-imagemin-vv -DLicense
MIT
End
First time to push something to github. I don't know whether it's easy to use. If you have any questions, please mail me.