Vite 中文文档

vite-plugin-imagemin


English| 中文

A vite plugin for compressing image assets

Install (yarn or npm)


node version:>=12.0.0

vite version:>=2.0.0

  1. ``` sh
  2. yarn add vite-plugin-imagemin -D

  4. ```

or

  1. ``` sh
  2. npm i vite-plugin-imagemin -D

  4. ```

China installation note


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

Use yarn to configure in package.json (recommended)

  1. ``` json
  2. "resolutions": {
  3.     "bin-wrapper": "npm:bin-wrapper-china"
  4.   },

  6. ```

Use npm, add the following configuration to the computer host file

  1. ``` shell
  2. 199.232.4.133 raw.githubusercontent.com
  3. ```

Install with cnpm (not recommended)

Usage


Configuration plugin in vite.config.ts

  1. ``` ts
  2. import viteImagemin from 'vite-plugin-imagemin'

  4. export default () => {
  5.   return {
  6.     plugins: [
  7.       viteImagemin({
  8.         gifsicle: {
  9.           optimizationLevel: 7,
  10.           interlaced: false,
  11.         },
  12.         optipng: {
  13.           optimizationLevel: 7,
  14.         },
  15.         mozjpeg: {
  16.           quality: 20,
  17.         },
  18.         pngquant: {
  19.           quality: [0.8, 0.9],
  20.           speed: 4,
  21.         },
  22.         svgo: {
  23.           plugins: [
  24.             {
  25.               name: 'removeViewBox',
  26.             },
  27.             {
  28.               name: 'removeEmptyAttrs',
  29.               active: false,
  30.             },
  31.           ],
  32.         },
  33.       }),
  34.     ],
  35.   }
  36. }
  37. ```

Options


params type default default
:--- :--- :--- :---
verbose boolean true Whether to output the compressed result in the console
filter RegExp or (file: string) => boolean - Specify which resources are not compressed
disable boolean false Whether to disable
svgo object or false - See Options
gifsicle object or false - See Options
mozjpeg object or false - See Options
optipng object or false - See Options
pngquant object or false - See Options
webp object or false - See Options

Example


Run Example

  1. ``` shell
  2. npm run dev:play
  3. npm run dev:build

  5. ```

Sample project


Vben Admin

License


MIT

Inspiration


vite-plugin-compress