vite-plugin-imagemin-vv
中文 | English
介绍
这是一个基于imagemin进行开发的vite插件，可以在build的时候自动获取指定路径下的指定类型的图片文件并压缩
安装
yarn add vite-plugin-imagemin-vv -D
或者
npm i vite-plugin-imagemin-vv -D
使用方式
import viteImagemin from 'vite-plugin-imagemin'
...
export default defineConfig({
plugins: [
viteImagemin()
]
})
配置
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| imgPath | Array | ['src/assets'] | 图片路径 |
| imgType | Array | ['jpg', 'png', 'svg', 'gif', 'jpeg'] | 需要转换的图片类型 |
| open | boolean | true | 是否开启压缩 |
| ignoreImagePath | Array | [''] | 比如需要跳过src/assets/config文件夹下的图片，设置 ['config']
|
| pluginConfig | - | ↓ | ↓ |
| pluginConfig.gifsicle | object | ↓ | 参考 官方文档 |
| pluginConfig.optipng | object | ↓ | 参考 官方文档 |
| pluginConfig.mozjpeg | object | ↓ | 参考 官方文档 |
| pluginConfig.pngquant | object | ↓ | 参考 官方文档 |
| pluginConfig.svgo | object | ↓ | 参考 官方文档 |
| pluginConfig.webp | object | ↓ | 参考 官方文档 |
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
}
})注意事项
imagemin 包含 pngquant 和 mozjpeg 等知名库，需要下载二进制文件。中国国内开发者因为网络原因大概率会导致安装失败，解决方式如下。
1、使用 resolutions 和 bin-wrapper-china（推荐）
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、使用 cnpm（不推荐）
cnpm i vite-plugin-imagemin-vv -D
License
MIT
最后
第一次开发东西传github，不知道好不好用，有问题请联系