npm 包 tiny-compress 使用教程

在前端开发中，图像压缩是非常常见的一项技术。在这里，我们将介绍一个 npm 包——tiny-compress，它可以帮助您轻松地对图片进行压缩。

什么是 tiny-compress？

tiny-compress 是一个基于 Node.js 的 npm 包，用于对图像进行压缩。它支持多种图像格式，包括 JPG、PNG 和 GIF。使用 tiny-compress 可以减少图像文件的大小，提高页面加载速度，并节省网络带宽。

如何使用 tiny-compress？

首先，您需要在本地项目中安装 tiny-compress npm 包。

npm install tiny-compress --save-dev

安装完成后，您需要引入 tiny-compress 模块并实例化它。以下是一个示例：

const TinyCompress = require('tiny-compress');
const compressor = new TinyCompress({
  fileSrc: './images/uncompressed/',
  fileDest: './images/compressed/',
  stats: true,
  silent: false,
});

这里，我们使用 TinyCompress 构造函数创建了一个 compressor 实例，并传递了以下参数：

• fileSrc：指定未压缩图像的存储路径。
• fileDest：指定压缩后图像的存储路径。
• stats：如果将其设置为“true”，则 tiny-compress 会在控制台中显示有关文件大小和压缩比的统计信息。
• silent：如果将其设置为“true”，则 tiny-compress 将不会在控制台中输出任何消息。

接下来，您需要调用 compressor 实例的 compress() 方法，以开始压缩图像。以下是一个示例：

compressor.compress();

这里，我们仅调用了 compress() 方法，但是您还可以将一些参数传递给它：

compressor.compress({
  maxConcurrency: 4,
  onlyNew: true,
});

这些参数包括：

• maxConcurrency：指定压缩操作的最大并发数。
• onlyNew：如果将其设置为“true”，则 tiny-compress 将仅压缩 fileSrc 目录中不存在于 fileDest 目录中的图像。

完成这些设置后，您可以在指定的目录中找到已压缩的图像文件。

压缩效果如何？

tiny-compress 使用类似于 tinypng.com 的算法来压缩图像。以下是在使用 tiny-compress 前后的一个示例：

未压缩图像：

压缩后的图像：

如图所示，压缩后的图像大小已经显著减小了。

结论

通过使用 tiny-compress npm 包，您可以轻松地对图像进行压缩，以提高页面加载速度并减少网络带宽。同时，tiny-compress 非常易于使用，其详细的使用说明和示例代码使它成为了学习和使用的理想选择。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005771581e8991b448eac1f