vite-plugin-imagemin 技术文档

1. 安装指南

环境要求

• Node.js 版本: >=12.0.0
• Vite 版本: >=2.0.0

安装命令

你可以使用 yarn 或 npm 来安装 vite-plugin-imagemin。

yarn add vite-plugin-imagemin -D

或者

npm i vite-plugin-imagemin -D

中国安装注意事项

由于在中国安装 imagemin 可能会遇到困难，以下是几种解决方案：

1. 使用 yarn 配置 package.json（推荐）

   在 package.json 中添加以下配置：

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

2. 使用 npm，修改主机文件

   在计算机的主机文件中添加以下配置：

   199.232.4.133 raw.githubusercontent.com
   

3. 使用 cnpm 安装（不推荐）

2. 项目使用说明

配置插件

在 vite.config.ts 文件中配置 vite-plugin-imagemin 插件。

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,
            },
          ],
        },
      }),
    ],
  }
}

运行示例

你可以通过以下命令运行示例项目：

npm run dev:play
npm run dev:build

3. 项目API使用文档

插件选项

参数	类型	默认值	描述
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

4. 项目安装方式

使用 yarn 安装

yarn add vite-plugin-imagemin -D

使用 npm 安装

npm i vite-plugin-imagemin -D

中国安装注意事项

• 使用 yarn 配置 package.json（推荐）
• 使用 npm，修改主机文件
• 使用 cnpm 安装（不推荐）

通过以上步骤，你可以顺利安装并使用 vite-plugin-imagemin 插件来压缩你的图片资源。