webpack-plugin-tinyfy

介绍

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

安装

npm i webpack-plugin-tinyfy  -S

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

快速上手

// webpack.config.js
const TinyfyPlugin = require("webpack-plugin-tinyfy");
// https://webpackjs.dev/config/
module.exports = {
  plugins: [new TinyfyPlugin()],
}

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

是否跳过压缩。

forceOn

• Type: boolean
• Default: true

是否强制开启压缩。

例子

更新记录

版本号	更新时间	作者	更新说明
1.0.0	2024.8.02	月如影	初始化
1.0.1	2024.8.02	月如影	完善文档
1.0.2	2024.8.12	月如影	修改插件名
1.0.3	2024.8.12	月如影	是否跳过压缩