vite-plugin-imagemin 技术文档

vite-plugin-imagemin 技术文档

vite-plugin-imagemin A vite plugin for compressing image assets. 项目地址: https://gitcode.com/gh_mirrors/vi/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 插件来压缩你的图片资源。

vite-plugin-imagemin A vite plugin for compressing image assets. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-imagemin