介绍
nvh-delivery 是一个 npm 包，用于优化网页页面中的图片加载。它可以帮助我们自动把网页上的图片大小进行压缩，转化格式，甚至还能将一些科技点进行应用，例如图片的懒加载等等。这些操作可以有效减少网页内的加载时间，加速页面响应速度，提升用户体验。
本篇文章将会介绍如何使用 nvh-delivery 包来优化网页图片，从安装到调用，内容详细且有深度和学习以及指导意义。
安装
首先我们需要在网站项目中安装 nvh-delivery。我们可以使用命令行终端，进入项目的根目录，输入以下命令来完成安装：
npm install nvh-delivery --save
安装完成后，我们就可以在项目中调用它。
使用
下面将会在项目中演示 nvh-delivery 的使用。
初始化
首先，我们需要在代码中引入 nvh-delivery 依赖。我们可以在需要使用的文件中引入：
const nvhDelivery = require('nvh-delivery');调用
在引入 nvh-delivery 之后，我们就可以使用它了。我们可以使用以下代码来使用 nvh-delivery 对项目中的图片进行优化：
-- -------------------- ---- -------
-------------
-------- -----------
-------- -
----- -
-------- --
--
---- -
-------- ---
------------ ----
-
-
---我们可以看到，我们需要传入一个参数对象，包括两个结构体 baseDir 和 formats。
baseDir：图片所在的文件夹路径。formats：针对不同的格式类型，设置不同的优化参数，例如jpeg、png、webp等等。
当我们调用完成后，nvh-delivery 将按照设置的规则，以异步的方式，对项目中的图片进行优化。
参数详解
我们可以在 formats 中，针对不同的格式类型，设置不同的优化参数，例如：
-- -------------------- ---- -------
-------- -
----- -
-------- --
--
---- -
-------- ---
------------ ----
-
-quality
quality 参数可以设置图片的压缩质量。数值越大，图片的质量越高，但同时也会占用更多的空间。建议设置在 60-80 之间。
progressive
progressive 参数可以设置 png 格式的图片是否开启渐进式优化，渐进式优化可以加快图片的加载速度，但同时也会占用更多的空间。
webp
webp 参数可以设置是否转换图片为 webp 格式。webp 格式是 Google 推出的图片格式，相比于 jpg 和 png，它的压缩效率更高，并且支持透明背景。但同时缺点是浏览器的兼容性不如 jpg 和 png。
您可以根据自己的需要来设置这些参数。
结语
在本文中，我们介绍了 npm 包 nvh-delivery 的使用方法，并给出了详细的示例代码。nvh-delivery 可以帮助我们自动优化网页上的图片，提高网页渲染速度，增强用户体验。希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4ac6eb7e50355dbfdc