@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 在中国不好安装。现提供几个解决方案

1. 使用 yarn 在 package.json 内配置(推荐)

"resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },

2. 使用 npm,在电脑 host 文件加上如下配置即可

199.232.4.133 raw.githubusercontent.com

3. 使用 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

示例项目

Vben Admin

License

MIT

灵感

vite-plugin-compress