前言
在 Web 前端开发过程中，我们通常会使用一些优化技术来提高我们的网站或应用的性能。其中一个有效的优化技术就是压缩图片。在此过程中，我们需要使用一些工具来进行图片压缩处理。本文将介绍一种常用的图片压缩工具 -- jpegoptim，以及如何在 Node.js 环境中使用其对应的 npm 包 jpegoptim-bin。
关于 jpegoptim 和 jpegoptim-bin
- jpegoptim：开源的 JPEG 图片压缩工具，可以降低图片文件大小，从而提高页面加载速度。
- jpegoptim-bin：jpegoptim 的 Node 包装器，方便我们在 Node.js 环境中使用 jpegoptim 的功能。
安装 jpegoptim 和 jpegoptim-bin
由于 jpegoptim 是基于 C 语言编写的，需要在安装 jpegoptim 之前安装相关的 C 语言编译器，如 gcc 和 make。在 Linux 系统中，可以通过以下命令安装：
---- ------- ------- ---------------
安装完编译器后，再通过以下命令安装 jpegoptim：
---- ------- ------- ---------
安装完 jpegoptim 后，我们可以使用以下命令安装 jpegoptim-bin：
--- ------- -------------
使用 jpegoptim-bin
压缩单个图片
下面是使用 jpegoptim-bin 压缩单个图片的示例代码：
----- -------- - ----------------------------------
----- --------- - -------------------------
-- --------
----- ------------ - ---------------------------------
------------------- -------- ---------------- ----- ------- ------- -- -
-- ----- -
----------------------
----- ----
-
----- ------- - ---------------------------------
------------------------- ------ ------------------
------------------------- ------ -------------
---上述代码中，execFile 方法用于执行命令行程序，并通过 jpegoptim 参数来指定要压缩的图片路径以及压缩率（-S80 表示压缩率为 80%）。执行完 jpegoptim 压缩命令后，我们可以通过 fs.statSync 方法获取压缩前和压缩后图片的大小。
批量压缩图片
下面是使用 jpegoptim-bin 批量压缩图片的示例代码：
----- -------- - ----------------------------------
----- --------- - -------------------------
----- ------- - -----------
------------------- -------- ----- ------ -
-- ----- -
-------------------
----- ----
-
---------------------- ------ -
-- ------------------- --- ------- -
----- -------- - ------------------ ------
----- ------------ - ---------------------------
------------------- -------- ---------- ----- ------- ------- -- -
-- ----- -
----------------------
----- ----
-
----- ------- - ---------------------------
------------------------ ------ ------------------
------------------------ ------ -------------
---
-
---
---上述代码中，我们使用 fs.readdir 方法获取 images 目录下的所有文件，然后对其中 .jpg 格式的图片进行批量压缩。通过 path.join 方法将文件路径和文件名拼接起来，然后和单个图片压缩代码类似，使用 execFile 方法执行 jpegoptim 命令。
结语
通过本文，我们可以了解 jpegoptim 和 jpegoptim-bin 工具的作用和相关的基本使用方法。在实际开发中，我们可以结合其他工具如 gulp 或 webpack 等来自动化压缩图片，并达到优化前端性能的效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/72885