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/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 -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.