在前端开发中，图片优化是一个非常重要的主题。为了减小页面加载时间，我们通常会使用工具在上传图片前进行优化。而 jpegoptim-stream 正是一个 npm 包，它可以将 JPEG 图片文件进行优化校正，并且使用流的方式进行实现。
在本文中，我们将详细介绍如何使用 jpegoptim-stream 包，以及如何将其集成到您的应用程序中，并提供使用示例代码。
安装 jpegoptim-stream 包
像使用其他 npm 包一样，可以使用 Node.js 的 NPM 包管理器安装 jpegoptim-stream。
npm install jpegoptim-stream --save-dev
使用 jpegoptim-stream 包
首先，让我们先创建一个名为 optimize-image.js 的文件。要使用 jpegoptim-stream，我们需要首先引入它：
const JpegOptim = require("jpegoptim-stream");接下来，使用 fs 模块中的 createReadStream() 和 createWriteStream() 函数创建可读流和可写流和输出流：
const fs = require("fs");
const path = require("path");
const inputFile = path.join(__dirname, "example.jpg");
const outputFile = path.join(__dirname, "optimized_example.jpg");
const inputStream = fs.createReadStream(inputFile);
const outputStream = fs.createWriteStream(outputFile);您还可以添加一些其他选项来自定义 jpegoptim 的行为。有关更多信息，请访问 jpegoptim-stream's README。
const options = {
progressive: true
}接下来，创建并使用 JpegOptim 实例来执行 JPEG 图片的优化。我们可以将 inputStream 作为参数传递给 JpegOptim 的构造函数。
const jpegOptimInstance = new JpegOptim({
progressive: true
});
inputStream.pipe(jpegOptimInstance).pipe(outputStream);使用上面的代码将 JPEG 图像进行了优化，并将其存储在输出文件中。
这就是 jpegoptim-stream 在最简单的用法中的介绍。让我们继续看一下如何将 jpegoptim-stream 集成到更大的项目中。
实际示例
在这个示例中，我们需要创建一个名为 main.js 的文件，并安装 Express 并将 jpegoptim-stream 作为其中一个中间件使用。
npm install express jpegoptim-stream --save-dev
然后，我们首先需要引入包并创建一个应用程序实例。
const express = require("express");
const app = express();接下来，我们可以在应用程序上使用中间件，并执行我们的图像优化。需要一个路由，该路由将在上传图像时执行优化。
-- -------------------- ---- -------
----- --------- - ----------------------------
----- ------ - ------------------
----- ------ - --------
-------- --------------------
------------ -------- ----- ----- --- -
-------- ------------
--
---
------- -
--------- -- - ---- - -----
--
---
------------------- ----------------------- ----- ---- -- -
----- --------- - --------------
----- ---------- - -------------------- - ------------ - ------------------
----- ----------- - -------------------------------
----- ------------ - ---------------------------------
----- ----------------- - --- -----------
------------ -----
---
-------------------------------------------------------
------------------------- -- -- -
-------------------------
---
---在上例中，我们使用 multer 来支持上传图像，并将上传后的图像存储在 uploads/ 文件夹中。在实际应用程序中，该文件路径必须进行适当的配置。
在这个示例中，我们仅仅演示了 jpegoptim-stream 的基本用法。想要更多的自定义和灵活性，请参阅他们的文档。
总结
在本文中，我们学习了 jpegoptim-stream 包的基本用法。我们看到了如何使用它来执行 JPEG 图像的优化并将其集成到 Express 应用程序中。在实践中，这将使您的 Web 应用程序更快，更出色，同时减少页面加载时间。
值得注意的是，在实践中，图片优化是一个复杂的主题，需要大量的知识和经验。本文中提供的信息仅仅只是冰山一角。为了更好地优化您的图片，请参阅进一步的文档和参考资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b181e8991b448dfee1