wsksvg - 优化升级，支持多进程处理文件和 SVG 图像转化

置顶小白6402

已于 2024-09-28 21:55:44 修改

阅读量924

点赞数 24

分类专栏： wsksvg工具文章标签：前端

于 2024-09-25 17:31:11 首次发布

本文链接：https://blog.csdn.net/nihaio25/article/details/142528966

版权

wsksvg工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

在不断发展的前端技术中，图像的优化和处理始终是提升应用性能的关键。wsksvg 插件的最新版本在之前的基础上进行了重大升级，现支持多进程处理文件以及将 SVG 图像转化为多种其他格式的图片。这一功能的引入不仅提升了处理效率，还大幅度增强了插件的灵活性和适用性。

概述

wsksvg 是一款旨在简化图像优化和处理的工具。新版本实现了多进程文件处理，使得大批量图像处理时的性能得到显著提升。此外，用户现在可以轻松将 SVG 图像转换为 PNG、JPG、JPEG、WEBP 和 GIF 等格式。无论是开发者还是设计师，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

将 SVG 转换为其它图片格式：

wsksvg  ./path/to/input.svg  ./path/to/output --format png

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

1. 多进程处理

新版本的 wsksvg 利用 CPU 核心数动态设置最大并发处理线程。通过 Worker 模块，每个文件的处理都在独立的线程中执行，显著提升了处理效率。例如，处理多个 SVG 文件时，插件能够同时启动多个工作线程，确保系统资源得到充分利用。

以下是处理文件的关键逻辑：

const worker = new Worker(path.join(__dirname, 'worker.js'), {
  workerData: { filePath, output, options },
});

2. SVG 转换为其他格式

除了优化 SVG 文件，wsksvg 现在支持将 SVG 转换为多种常见图像格式，包括 PNG、JPG、JPEG、WEBP 和 GIF。这一功能使得用户可以在不使用其他工具的情况下，轻松获取所需格式的图像文件。

操作示例

将 SVG 转换为 PNG：
```
wsksvg input.svg --format png
```
将 SVG 转换为 JPG：
```
wsksvg input.svg --format jpg
```

在这里插入图片描述

3. 优化输出与进度显示

新版本提供实时进度显示，让用户在处理时可随时查看成功和失败的文件数，以及处理进度。代码中通过 updateProgress 函数实现进度反馈：

function updateProgress(successCount, failureCount, total) {
  const percent = ((successCount + failureCount) / total) * 100;
  process.stdout.write(`\rProgress: ${percent.toFixed(2)}% (Success: ${successCount}, Failures: ${failureCount})`);
}

为了增强用户体验，wsksvg 新增了输出优化和进度显示功能。在处理文件时，用户可以实时查看当前处理的文件、原始大小、优化后大小以及处理进度。这一改进使得用户能够更好地掌握处理过程，并进行必要的调整。

在这里插入图片描述

技术实现

wsksvg 的多进程处理基于 worker_threads 模块。在处理每个文件时，主线程将任务分配给工作线程，工作线程独立执行图像处理任务，完成后将结果返回给主线程。以下是一个多进程处理的核心代码示例：

import { parentPort, workerData } from 'worker_threads';
import { processSvgFile } from './processSvgFile.js';
import { processImageFile } from './processImageFile.js';
import path from 'path';

async function processFile(filePath, output, options) {
    const extname = path.extname(filePath).toLowerCase();
    if (extname === '.svg') {
        return await processSvgFile(filePath, output, options);
    } else if (['.png', '.jpg', '.jpeg', '.gif'].includes(extname)) {
        return await processImageFile(filePath, output, options);
    } else {
        throw new Error(`Unsupported file type: ${extname}`);
    }
}

(async () => {
    try {
        const { filePath, output, options } = workerData;
        const result = await processFile(filePath, output, options);
        parentPort.postMessage(result);
    } catch (error) {
        parentPort.postMessage({ error: error.message });
    }
})();