前言
上一篇文章介绍了 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
插件都提供了灵活和强大的功能来满足你的需求。