当我们构建前端项目时，优化图片尤为重要，可以帮助我们减小前端包体积和提升页面性能。现有的图片压缩工具大多需要手动上传图片，不太方便，因此推荐一款自动图片压缩工具 webpack-tinypng-compress。
什么是 webpack-tinypng-compress
webpack-tinypng-compress 是一个 webpack 插件，可自动压缩图片，并将压缩后的图片替换为原始文件。它利用 TinyPNG 提供的 API 来进行图片压缩，需在注册 TinyPNG 并获取 API Key 后方可使用。
安装
通过以下命令安装该插件：
npm install webpack-tinypng-compress --save-dev
使用方法
在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- ---------------------------- - ------------------------------------
-------------- - -
-------- -
-- -------
--- ------------------------------
---- -----------------------
----- --------------------------------
--------- ---------
-------- ----
--
-
-其中：
key: 你的 TinyPNG API Key。test: 匹配图片文件的正则表达式，默认为 /.(png|jpe?g|gif|svg)(?.*)?$/。cacheDir: 用于缓存压缩后的图片，加快下次压缩速度。默认为.cache目录。enabled: 是否启用插件，默认为true。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ---------------------------- - ------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
------ ------------------------- ----
--------- -------------------
--------- ------------
---
--- ------------------------------
---- --------------- -- ------- --- ---
----- --------------------------------
--------- ---------
-------- ----
--
--
------- -
------ -
-
----- ---------
---- ---------------- -------------
--
-
----- -----------------------
---- ---------------
-
-
-
--在该示例中，将 key 替换为真实的 API Key，启用插件后所有匹配的图片将被压缩。为了方便展示，这里使用了 file-loader 来处理图片，但你也可以使用其他更加高效的 loader 来处理图片。
总结
webpack-tinypng-compress 是一款非常实用的 webpack 插件，能够自动压缩图片并替换原始文件。在大型前端项目中优化图片是必不可少的，该插件能够大大节约时间和精力，提升工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580681e8991b448d52a4