vscode任务需手动创建dist目录,imagemin不自动建父级目录且静默失败;glob路径应为['./src/*/.png'];中文或空格路径易出错;pngquant的quality是0–1感知质量阈值,推荐[0.6,0.8];tasks.json须设"isbackground":false并移除problemmatcher;speed参数影响清晰度,含文字图建议speed:5。

VSCode 任务配置必须手动建 dist 目录,否则 imagemin 会静默失败
很多人在运行压缩脚本后发现 dist 文件夹空空如也,控制台却没报错——根本原因是 imagemin 不创建父级目录,连 ./dist 不存在都会跳过写入,且不抛异常。这不是 bug,是设计行为。
-
./dist必须提前用mkdir dist或手动创建,不能依赖任务自动创建 - glob 路径写成
['./src/**/*.png']才能递归匹配子目录;./src/*/*.png会漏掉三层及更深的 PNG - 如果源路径含中文或空格,Node 的
fs.readdir在某些 Windows 版本下可能出错,建议先重命名文件夹为纯 ASCII
imagemin-pngquant 的 quality 参数不是百分比,0.4 和 0.6 是保真度区间
看到 quality: [0.4, 0.6] 就以为是“40%–60%”压缩率?错了。这是 pngquant 内部的感知质量阈值,范围是 0–1,数值越低,颜色量化越激进,渐变条纹、细微噪点更容易崩坏。
-
[0.6, 0.8]是安全区间,适合多数 UI 图标和截图,肉眼难辨损失 -
[0.4, 0.5]可把 500KB PNG 压到 80KB,但按钮阴影、半透明图层可能出现色带 - 别设单值如
quality: 0.6—— pngquant 要求数组,否则插件直接忽略该参数
VSCode 任务触发后无响应?检查 tasks.json 中的 isBackground 和 problemMatcher
任务跑起来没日志、没完成提示,大概率是 VSCode 把它当成了后台长期进程,没等结束就收走了控制权。
- 务必在
tasks.json的 task 配置里加"isBackground": false(默认是true) - 删掉或注释掉
"problemMatcher"—— imagemin 没标准错误输出格式,配了反而卡住 - 命令行字段写
"command": "node", "args": ["compress-png.js"],别用npm run compress,避免多一层 shell 启动开销
压缩后图片变糊或发色?优先关掉 speed: 1 再排查
speed: 1 确实压得最狠,但代价是:启用全部 dithering 算法 + 多轮颜色聚类,对含精细文字或线条图的 PNG 容易引入噪点或模糊边缘。不是所有图都适合。
- 先试
speed: 3(默认值),对比前后尺寸和观感,再决定是否降速 - 含文字的 PNG(比如 banner、说明图)建议固定
speed: 5,平衡速度与清晰度 - 若仍发色,检查原图是否带非标准色彩配置文件(如 Adobe RGB),
imagemin-pngquant默认丢弃 ICC profile,需额外加verbose: true看日志中是否有skipping ICC profile提示
speed: 1 下可能锐度崩坏,换一张扁平图标却体积直降 60%。别迷信参数,每次调参后务必抽样肉眼比对。











