@madogai/vite-plugin-imagemin
v0.7.4
Published
A vite plugin for compressing image assets
Downloads
65
Readme
@madogai/vite-plugin-imagemin
中文 | English
一个压缩图片资产的 vite 插件
安装 (yarn or npm)
node version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-imagemin -D
or
npm i vite-plugin-imagemin -D
中国安装注意
由于 imagemin 在中国不好安装。现提供几个解决方案
- 使用 yarn 在 package.json 内配置(推荐)
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
},
- 使用 npm,在电脑 host 文件加上如下配置即可
199.232.4.133 raw.githubusercontent.com
- 使用 cnpm 安装(不推荐)
使用
- 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,
},
],
},
}),
],
}
}
配置说明
| 参数 | 类型 | 默认值 | 说明 |
| -------- | ------------------------------------- | ------- | ----------------------------------------------------------- |
| verbose | boolean
| true
| 是否在控制台输出压缩结果 |
| filter | RegExp or (file: string) => boolean
| - | 指定哪些资源不压缩 |
| disable | boolean
| false
| 是否禁用 |
| svgo | object
or false
| - | 见 Options |
| gifsicle | object
or false
| - | 见 Options |
| mozjpeg | object
or false
| - | 见 Options |
| optipng | object
or false
| - | 见 Options |
| pngquant | object
or false
| - | 见 Options |
| webp | object
or false
| - | 见 Options |
示例
运行示例
npm run dev:play
npm run dev:build
示例项目
License
MIT