概述

图像和图标的优化及处理变得至关重要。wsksvg 是一款高效的工具，旨在简化图像优化工作和增强 SVG 文件的处理能力。该插件不仅可以优化多种图像格式，还能将 SVG 文件转化为 Vue 和 React 组件，甚至支持将 SVG 文件转换为 Base64 编码格式。无论是用于提升应用性能、简化组件开发还是实现更高效的资源管理，wsksvg都是一个强大的解决方案。

安装

npm install -g wsksvg

或者使用 yarn：

yarn global add wsksvg

node 环境要求20以上

使用

在安装和配置完成后，您可以开始使用 wsksvg 插件来优化图像文件或生成组件。以下是一些常见操作的示例：

通过上述步骤，您可以轻松安装和配置 wsksvg 插件，以优化图像和管理 SVG 组件。

详细看上一篇：wsksvg — SVG 转换与优化工具

主要功能

wsksvg插件具备以下主要功能：

1. 图像优化

插件支持对以下图像格式进行优化：

2. SVG 文件处理默认配置文件

插件支持通过配置文件自定义优化设置。配置文件（wsksvg.json）可以放在项目根目录或当前工作目录中。以下是一个配置文件的详细示例：

{
    "svgo": {
        "js2svg": {
            "indent": 2, // 设置 SVG 输出时的缩进级别，便于阅读。值为 2 表示每级缩进两个空格。
            "pretty": true // 是否美化输出的 SVG 代码。如果为 true，则输出的 SVG 将会更具可读性。
        },
        "plugins": [
            {
                "name": "preset-default", // 使用 SVGO 默认预设插件
                "params": {
                    "overrides": {
                        "removeViewBox": false, // 是否移除 viewBox 属性。false 表示保留，确保 SVG 在不同尺寸下正确显示。
                        "inlineStyles": {
                            "onlyMatchedOnce": false // 是否仅对匹配的样式进行内联。如果为 false，则所有样式都会内联。
                        }
                    }
                }
            },
            {
                "name": "convertStyleToAttrs", // 将内联样式转换为 SVG 属性
                "params": {
                    "onlyMatchedOnce": false // 是否仅对匹配的样式进行转换。如果为 false，则所有内联样式都会被转换为属性。
                }
            },
            {
                "name": "removeAttrs", // 移除指定的属性
                "params": {
                    "attrs": [
                        "svg:style" // 移除 SVG 元素上的 style 属性
                    ]
                }
            },
            {
                "name": "addAttributesToSVGElement", // 向 SVG 元素添加额外属性
                "params": {
                    "attributes": [
                        {
                            "width": "1em", // 设置 SVG 的默认宽度为 1em
                            "height": "1em", // 设置 SVG 的默认高度为 1em
                            "aria-hidden": true, // 为 SVG 添加 aria-hidden 属性，指示屏幕阅读器忽略 SVG。
                            "focusable": "false" // 设置 focusable 属性为 false，防止 SVG 在键盘导航中获得焦点。
                        }
                    ]
                }
            }
        ]
    },
    "png": {
        "quality": 80, // PNG 图像的质量，值范围是 0 到 100。数值越高表示质量越好，文件体积也可能越大。
        "compressionLevel": 9, // PNG 图像的压缩级别，值范围是 0 到 9。数值越高表示压缩越强，文件体积越小。
        "adaptiveFiltering": true, // 是否启用自适应过滤。自适应过滤可以改善图像的压缩质量。
        "palette": true, // 是否使用调色板。启用调色板可以减少图像的颜色数量，减小文件体积。
        "dither": 0 // 设置抖动级别，值范围是 0 到 1。0 表示不使用抖动，1 表示启用抖动以改善颜色过渡。
    },
    "jpg": {
        "quality": 80, // JPG/JPEG 图像的质量，值范围是 0 到 100。数值越高表示质量越好，文件体积也可能越大。
        "mozjpeg": true, // 是否使用 mozjpeg 编码。mozjpeg 可以进一步压缩 JPG 图像，提高压缩效率。
        "progressive": true, // 是否启用渐进式编码。渐进式编码使图像在加载时逐渐清晰，有助于提升用户体验。
        "trellisQuantisation": true // 是否启用网格量化。网格量化可以提高 JPG 图像的压缩效果，减少文件体积。
    },
    "jpeg": {
        "quality": 80, // JPEG 图像的质量，配置与 JPG 相同。
        "mozjpeg": true, // 是否使用 mozjpeg 编码，配置与 JPG 相同。
        "progressive": true, // 是否启用渐进式编码，配置与 JPG 相同。
        "trellisQuantisation": true // 是否启用网格量化，配置与 JPG 相同。
    },
    "webp": {
        "quality": 80, // WEBP 图像的质量，值范围是 0 到 100。数值越高表示质量越好，文件体积也可能越大。
        "lossless": false, // 是否使用无损压缩。无损压缩可以保持图像质量，但文件体积较大。
        "alphaQuality": 90 // 设置 WEBP 图像的 alpha 通道质量，值范围是 0 到 100。数值越高表示透明通道的质量越好。
    },
    "gif": {
        "optimizeLevel": 3, // GIF 图像的优化级别，值范围是 0 到 3。数值越高表示优化越强，文件体积越小。
        "colors": 256, // GIF 图像的颜色数量，值范围是 1 到 256。较少的颜色可以减小文件体积。
        "dither": true // 是否启用抖动。抖动可以改善 GIF 图像的颜色过渡。
    }
}

图像格式配置

svgwsk 支持多种图像格式的优化，包括SVG, PNG、JPG、JPEG、WEBP 和 GIF。以下是每种格式的配置项说明：

svgo 配置

SVGO (SVG Optimizer) 是一个流行的工具，用于优化 SVG 文件，减少文件体积并保持图像质量。svgwsk 插件通过 svgo 对 SVG 进行优化，以下是各配置项的说明：

PNG 配置JPG 配置JPEG 配置

与 JPG 配置相同，因为 JPG 和 JPEG 在配置上是重复的，通常可以合并配置项。

WEBP 配置GIF 配置使用技术

svgwsk插件使用了一些核心技术和工具来实现其功能：

支持自定义配置

在项目的根目录中创建一个配置文件 wsksvg.json。你可以根据之前提供的示例进行自定义配置，以满足您的需求。

Sharp高性能 Node.js 图像处理

SVGO配置

可以自行查阅进行配置

应用场景

svgwsk 插件可以应用于各种前端开发场景中：

前端性能优化：组件开发与管理：资源嵌入与管理：自动化构建流程：最后

以上次相比：

1.提供扩展了图片的优化与配置，

2.提供默认配置文件，也可以自定义配置优化文件，供使用者自行配置

3.扩展了生成base文件。

总结

通过配置 svgwsk 插件，你可以根据具体需求调整图像优化和组件生成的行为。了解每个配置项的作用和效果，能够帮助你更有效地使用该插件，实现更好的图像处理效果。无论是优化 SVG 文件，生成 Vue 或 React 组件，还是将 SVG 转换为 Base64 编码，svgwsk 插件都提供了灵活和强大的功能来满足你的需求。