vite-plugin-tinyfy

介绍

vite-plugin-tinyfy 是一款高效的图片压缩工具。其核心是利用 tinyfy 对图片资源进行无损压缩，具有高效压缩、简单易用、支持多种格式以及绝对保证图片质量等特点。

安装

npm i vite-plugin-tinyfy  -S

# yarn 安装
yarn add vite-plugin-tinyfy  -S

快速上手

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tinyfy from "vite-plugin-tinyfy"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    tinyfy(
      //{
      //  outDir?: ''; // 默认根目录dist文件夹
      //  svgConfig?: {}; // svg 配置
      //  max?: 5_242_880; // 图片最大压缩 默认值 5_242_880（5M）
      //}
    )
  ],
})

options 参数说明

outDir

• Type: string
• Default: dist

压缩的图片目录。

svgConfig

• Type: object
• Default: {}

{
  multipass: true,
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          cleanupNumericValues: false,
          removeViewBox: false,
        },
      },
    },
    "sortAttrs",
    {
      name: "addAttributesToSVGElement",
      params: {
        attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
      },
    },
  ]
}

svg的压缩配置参数，可参考 https://svgo.dev/

max

• Type: number
• Default: 5_242_880

图片最大压缩值，超过该值就不处理。

quiet

• Type: boolean
• Default: true

是否在控制台输出压缩信息。

pass

• Type: boolean
• Default: true

是否跳过压缩。

例子

更新记录

版本号	更新时间	作者	更新说明
1.0.0	2024.8.02	月如影	初始化
1.0.1	2024.8.02	月如影	完善文档
1.0.2	2024.8.02	月如影	替换控制台输出方法 logger.info 为console.log
1.0.3	2024.8.06	月如影	新增 quiet 参数控制是否打印输出控制台信息
1.0.4	2024.8.06	月如影	新增对 esm 模式支持
1.0.5	2024.8.06	月如影	新增对 type: module 支持
1.0.6	2024.8.06	月如影	处理 CommonJS 异常