前言
在 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 系统中，可以通过以下命令安装：
sudo apt-get install build-essential
安装完编译器后，再通过以下命令安装 jpegoptim：
sudo apt-get install jpegoptim
安装完 jpegoptim 后，我们可以使用以下命令安装 jpegoptim-bin：
npm install 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
