0.6.1 • Published 2 years ago

vite-plugin-imagemin v0.6.1

Weekly downloads
959
License
MIT
Repository
github
Last release
2 years ago

vite-plugin-imagemin

English | 中文

npm node

A vite plugin for compressing image assets

Install (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

China installation note

Because imagemin is not easy to install in China. Several solutions are now available

  1. Use yarn to configure in package.json (recommended)
"resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  1. Use npm, add the following configuration to the computer host file
199.232.4.133 raw.githubusercontent.com
  1. Install with cnpm (not recommended)

Usage

  • Configuration plugin in 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,
            },
          ],
        },
      }),
    ],
  };
};

Options

paramstypedefaultdefault
verbosebooleantrueWhether to output the compressed result in the console
filterRegExp or (file: string) => boolean-Specify which resources are not compressed
disablebooleanfalseWhether to disable
svgoobject or false-See Options
gifsicleobject or false-See Options
mozjpegobject or false-See Options
optipngobject or false-See Options
pngquantobject or false-See Options
webpobject or false-See Options

Example

Run Example

cd ./example

yarn install

yarn build

Sample project

Vben Admin

License

MIT

Inspiration

vite-plugin-compress