前言
上一篇文章介绍了 wsksvg 插件的开发思路和灵感，而本篇则详细阐述了 wsksvg 扩展功能，以及技术的介绍。通过 wsksvg 插件，开发者可以高效地优化 PNG、JPG、JPEG、WEBP 和 GIF 图像，同时对 SVG 文件进行深入处理，包括优化、生成 Vue 和 React 组件以及转换为 Base64 编码格式。这些功能不仅简化了图像管理流程，也提升了应用的性能和用户体验。结合上一篇文章的开发背景，本篇提供了具体的技术实现和配置选项。以及扩展，相对于之前来说更灵活
概述
在当今前端开发中，图像和图标的优化及处理变得至关重要。wsksvg 是一款高效的工具，旨在简化图像优化工作和增强 SVG 文件的处理能力。该插件不仅可以优化多种图像格式，还能将 SVG 文件转化为 Vue 和 React 组件，甚至支持将 SVG 文件转换为 Base64 编码格式。无论是用于提升应用性能、简化组件开发还是实现更高效的资源管理，wsksvg都是一个强大的解决方案。
安装
npm install -g wsksvg
或者使用 yarn：
yarn global add wsksvg
node 环境要求20以上
使用
在安装和配置完成后，您可以开始使用 wsksvg 插件来优化图像文件或生成组件。以下是一些常见操作的示例：
-
优化图像文件：
wsksvg ./path/to/input.png -
将 SVG 转换为 Vue 组件：
wsksvg ./path/to/input.svg ./path/to/output --vue -
将 SVG 转换为 React 组件：
wsksvg ./path/to/input.svg ./path/to/output --react -
将 SVG 转换为 Base64 编码：
wsksvg ./path/to/input.svg ./path/to/output --base
通过上述步骤，您可以轻松安装和配置 wsksvg 插件，以优化图像和管理 SVG 组件。
详细看上一篇：wsksvg — SVG 转换与优化工具
主要功能
wsksvg插件具备以下主要功能：
1. 图像优化
插件支持对以下图像格式进行优化：
- PNG：通过
sharp库，插件可以调整 PNG 图像的质量、压缩级别、过滤方式等，减少文件体积，同时保持图像质量。 - JPG/JPEG：对 JPG 和 JPEG 图像进行优化，支持设置图像质量、启用
mozjpeg编码、设置渐进式编码等，以减少文件体积。 - WEBP：支持 WEBP 格式的优化，包括设置质量、启用无损压缩和调整 alpha 通道质量。
- GIF：对于 GIF 图像，插件首先使用
sharp库生成中间文件，然后通过gifsicle进行优化，以减少文件大小并提升性能。
2. SVG 文件处理
- SVG 优化：使用
svgo对 SVG 文件进行优化，移除冗余属性和无用代码，压缩 SVG 文件的体积。这有助于加快页面加载速度，并减少网络带宽消耗。 - Vue 组件生成：将优化后的 SVG 文件转换为 Vue 组件。生成的 Vue 组件代码使用
v-html指令来嵌入 SVG，便于在 Vue 项目中使用和管理。 - React 组件生成：将 SVG 文件转换为 React 组件，支持 JSX 语法，生成的组件可直接用于 React 项目中，简化图标的使用和管理。
- Base64 编码：将 SVG 文件转换为 Base64 编码的字符串，适用于将图像数据直接嵌入到 HTML 或 CSS 文件中，减少网络请求，提高渲染速度。
默认配置文件
插件支持通过配置文件自定义优化设置。配置文件（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 进行优化，以下是各配置项的说明：
js2svg：配置 SVG 输出格式的选项。plugins：定义 SVGO 插件及其参数，用于进一步优化 SVG 文件。
PNG 配置
quality：设置 PNG 图像的质量，范围是0到100。较高的值表示更好的质量和较大的文件体积。compressionLevel：设置 PNG 图像的压缩级别，范围是0到9。数值越高表示压缩越强，文件体积越小。常用的值是9，表示最大压缩。adaptiveFiltering：布尔值，控制是否启用自适应过滤。启用自适应过滤可以改善图像的压缩质量，特别是对于有色彩渐变的图像。palette：布尔值，决定是否使用调色板。启用调色板可以减少图像的颜色数量，从而减小文件体积。dither：设置抖动级别，范围是0到1。0表示不使用抖动，1表示启用抖动以改善颜色过渡。
JPG 配置
quality：设置 JPG 图像的质量，范围是0到100。较高的值表示更好的质量和较大的文件体积。mozjpeg：布尔值，控制是否使用mozjpeg编码。mozjpeg提供更高的压缩效率。progressive：布尔值，决定是否启用渐进式编码。渐进式编码使图像在加载时逐渐清晰，有助于提高用户体验。trellisQuantisation：布尔值，控制是否启用网格量化。网格量化可以进一步压缩 JPG 图像，减少文件体积。
JPEG 配置
与 JPG 配置相同，因为 JPG 和 JPEG 在配置上是重复的，通常可以合并配置项。
WEBP 配置
quality：设置 WEBP 图像的质量，范围是0到100。较高的值表示更好的质量和较大的文件体积。lossless：布尔值，决定是否使用无损压缩。无损压缩保留原始图像质量，但文件体积较大。alphaQuality：设置 WEBP 图像的 alpha 通道质量，范围是0到100。较高的值表示更好的透明度质量。
GIF 配置
optimizeLevel：设置 GIF 图像的优化级别，范围是0到3。较高的值表示更强的优化，减少文件体积。colors：设置 GIF 图像的颜色数量，范围是1到256。较少的颜色可以减小文件体积，但可能影响图像质量。dither：布尔值，决定是否启用抖动。抖动可以改善 GIF 图像的颜色过渡。
使用技术
svgwsk插件使用了一些核心技术和工具来实现其功能：
sharp：一个高性能的图像处理库，支持多种图像格式的转换和优化。它用于优化 PNG、JPG、JPEG、WEBP 和 GIF 图像。gifsicle：一个用于优化 GIF 图像的命令行工具。插件使用它来进一步优化 GIF 文件。svgo：一个用于优化 SVG 文件的工具。它通过移除多余的属性和代码来压缩 SVG 文件的体积。@svgr/core：一个将 SVG 转换为 React 组件的库。插件利用它来生成 React 组件代码。camelcase：一个用于将字符串转换为 camelCase 格式的库。插件用于生成符合 React 组件命名规则的组件名。
支持自定义配置
在项目的根目录中创建一个配置文件 wsksvg.json。你可以根据之前提供的示例进行自定义配置，以满足您的需求。
可以自行查阅进行配置
应用场景
svgwsk 插件可以应用于各种前端开发场景中：
- 前端性能优化：
- 在开发过程中，通过优化图像文件来减少页面加载时间，提升用户体验。优化后的图像可以显著减小文件体积，提高加载速度。
- 组件开发与管理：
- 在构建组件库时，将 SVG 图标转换为 Vue 或 React 组件，简化图标的使用和管理。组件化的图标可以更容易地进行复用和维护。
- 资源嵌入与管理：
- 将 SVG 文件转换为 Base64 编码格式，嵌入到 HTML 或 CSS 中，减少网络请求。适用于小型图标或图像的直接嵌入，提高页面渲染效率。
- 自动化构建流程：
- 将插件集成到构建流程中，自动处理图像和 SVG 文件。结合构建工具（如 Webpack、Gulp 等），实现自动化优化和组件生成。
最后
以上次相比：
1.提供扩展了图片的优化与配置，
2.提供默认配置文件，也可以自定义配置优化文件，供使用者自行配置
3.扩展了生成base文件。
总结
通过配置 svgwsk 插件，你可以根据具体需求调整图像优化和组件生成的行为。了解每个配置项的作用和效果，能够帮助你更有效地使用该插件，实现更好的图像处理效果。无论是优化 SVG 文件，生成 Vue 或 React 组件，还是将 SVG 转换为 Base64 编码，svgwsk 插件都提供了灵活和强大的功能来满足你的需求。
6094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
