前言
在 Web 开发过程中，优化图片加载速度是很重要的一环。而 pngquant 是一款优秀的 png 图片压缩工具，除了常规的 pngquant 外，还有一款经过 GFW 优化后的 imagemin-pngquant-gfw。今天我们就来学习一下该 npm 包的使用教程。
安装
直接安装
通过 npm 安装 imagemin-pngquant-gfw：
npm install imagemin-pngquant-gfw --save-dev
与 imagemin 一并安装
如果您已经在项目中使用了 npm 包 imagemin，则可以直接与 imagemin 一并安装：
npm install imagemin imagemin-pngquant-gfw --save-dev
使用
1. 引入依赖
有两种引入依赖的方式。
第一种，使用 require：
const imagemin = require('imagemin');
const imageminPngquantGfw = require('imagemin-pngquant-gfw');第二种，使用 import：
import imagemin from 'imagemin'; import imageminPngquantGfw from 'imagemin-pngquant-gfw';
2. 压缩 png 图片
-- -------------------- ---- -------
------ -- -- -
----- ----- - ----- -------------------------- -
------------ ---------------
-------- -
---------------------
-------- ----- ----
--
-
---
-------------------
---- ------- ------- -- -- -- --- ---------------- ------------------------ --
-----上述代码中，images/*.png 表示需要压缩的 png 图片文件路径；build/images 表示压缩后的图片将被放置的路径；quality: [0.6, 0.8] 表示压缩的质量为 60% - 80%。更多参数可以在 npm 包官网中查阅。
常见问题
1. imagemin-pngquant-gfw vs imagemin-pngquant
经过 GFW 优化的 imagemin-pngquant-gfw 直接安装时需要配置一些参数才能使用。而常规的 imagemin-pngquant 不需要配置参数即可使用。但是一些优化的参数在 imagemin-pngquant-gfw 中是不支持的。
2. pngquant vs pngcrush
pngquant 的优点是它可以在保持绝大多数源文件真实色彩的同时，将原始文件大幅压缩，占用更小的存储空间。而 pngcrush 则不行。
但是需要注意的是，pngquant 最优秀的性能只能针对一些特定类型的 png 文件，其他类型的处理效果并不好。
总结
通过学习本文，您应该了解了 npm 包 imagemin-pngquant-gfw 的使用教程，以及其与 imagemin 和常规的 pngquant 的区别。在使用时需要注意选择合适的参数进行配置，以获得最佳的压缩效果。希望本文能对您在前端开发中优化图片加载速度有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005515d81e8991b448ce7b8