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 -D

or

npm i vite-plugin-imagemin-vv -D

Usage

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/config just 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

1viteImagemin({
2    imgPath: ['src/assets'],
3    imgType: ['jpg', 'png', 'svg', 'gif', 'jpeg'],
4    open: true,
5    ignoreImagePath: [''],
6    pluginConfig: {
7      gifsicle: {
8        optimizationLevel: 7,
9      },
10      optipng: {
11        optimizationLevel: 7,
12      },
13      mozjpeg: {
14        quality: 50,
15      },
16      pngquant: {
17        quality: [0.7, 0.8],
18        speed: 4,
19      },
20      svgo: {
21        plugins: [
22          {
23            name: 'preset-default',
24            params: {
25              overrides: {
26                inlineStyles: {
27                  onlyMatchedOnce: false,
28                },
29              },
30            },
31          },
32        ],
33      },
34      webp: false
35    }
36})

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 -D

License

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.