-前言-

博主目前还是主力使用Laya进行游戏开发，随着项目扩大，资源量增加，发布愈发的缓慢。究其根本还是问题出在了图片压缩问题上，实在受不了准备将压缩流程剥离出来，在自己想压缩的时候再执行命令压缩也不迟。

-正文-

首先来说一说为什么图片压缩那么慢，图片压缩分为两个步骤：1.PNG压缩，采用了pngquant，改工具在时间空间复杂度都不高。2.JPEG格式压缩，采用了guetzli，这个工具就是让你在压缩时电脑卡得不行的工具，随着压缩的图片越大暂用率越高。

这里就不讨论两个工具的使用了，也不讨论他们的效率，guetzli虽然效率低不过在jpg格式中的压缩率还是很不错，只要我们合适的时候使用也不会影响我们的心情：）

思路

其实思路还是很简单的，读取指定目录下的所有png、jpg然后调用pngquant或者guetzli工具，值得注意的是两个工具都只有单张图片的压缩方式，因此需要不停的调用子进程进行压缩。png是游戏中使用较多的图片格式，jpg一般用于用户头像，游戏log这些应用场景频率较小的地方，更改频率也比较小，因此我们可以将工具分为png压缩、jpg压缩、图片压缩三个命令，视情况选择执行。

使用工具时需要安装下载guetzli，pngquant

1.批处理文件

首先我们定义三个批处理文件，分别处理png压缩任务，jpg压缩任务，图片压缩任务。

//bat jpg压缩
node index.js jpg
@pause//bat png压缩
node index.js png
@pause//压缩png jpg
node index.js png jpg
@pause

2.读取指定目录下的所有文件并筛选PNG、JPG文件

//1.首先读取指定目录下的所有文件路径
/*** 读取指定路径下的所有文件路径并赋值到out中* @param {string} parentPath * @param {Array<string>} out */
function readAll(parentPath, out) {try {let files = fs.readdirSync(parentPath);files.forEach(function (item) {let tempPath = path.join(parentPath, item);let stats = fs.statSync(tempPath);if (stats.isDirectory()) {readAll(tempPath, out);} else {out.push(tempPath);}});} catch (e) {console.warn("Path Error:" + e);return out;}
}
//2.筛选png，jpg
let allFileList = [];
readAll(root_path, allFileList);
let pngList = [];
let jpgList = [];
for (let i = 0; i < allFileList.length; i++) {let fileData = path.parse(allFileList[i]);if (fileData.ext == ".png") {pngList.push(allFileList[i]);} else if (fileData.ext == ".jpg" || fileData.ext == ".JPG") {jpgList.push(allFileList[i]);}
}

3.根据进程参数执行压缩

之前我们定义的bat分别向nodejs程序传入的执行参数，这时候我们就可以通过参数来指定执行什么函数。

if (process.argv.indexOf(TYPE_PNG) != -1) {//1.压缩pngcompressPNG(pngList, compressCache.PNG, onCompressComplete);
} else {isPngComplete = true;
}if (process.argv.indexOf(TYPE_JPG) != -1) {//2.压缩jpgcompressJPG(jpgList, compressCache.JPG, onCompressComplete);
} else {isJpgComplete = true;
}//所有压缩完成回调
function onCompressComplete(type) {if (type == TYPE_JPG) {isJpgComplete = true;console.log("JPG 压缩完成.");}if (type == TYPE_PNG) {isPngComplete = true;console.log("PNG 压缩完成.")}if (isPngComplete && isJpgComplete) {let encodeCache = JSON.stringify(compressCache);//回写cachefs.writeFileSync("./cache/cache.json", encodeCache, "utf-8");console.log("压缩完成...");}
}

压缩的时候做了一个小小的优化，通过缓存图片文件的大小及修改时间来判断是否需要压缩文件，对于没有修改的文件就不进行压缩。通过文件名转md5存到cache.json文件中。

4.PNG压缩

/**压缩png */
function compressOnePNG(filePath, completeHandler) {const exePath = "./lib/pngquant/pngquant.exe";let param = ['--strip', '--force'];param.push('--skip-if-larger');param.push("--quality=" + [pngQualityLow, pngQualityHigh].join("-"));param.push('--output', filePath);param.push(filePath);let childP = child_process.spawn(exePath, param);childP.stdout.on('data', function (data) {});childP.stderr.on('data', function (data) {});childP.on("close", function (code) {let iCode = parseInt(code);if (iCode != 0) {//error}console.log(filePath, "压缩完成");completeHandler && completeHandler(filePath);});
}

5.JPG压缩

/**压缩jpg */
function compressOneJPG(url, completeHandler) {let exePath = "guetzli_" + os.platform() + "_x86";if (os.arch == "x64") {exePath += "-64";}if ("win32" == os.platform()) {exePath += ".exe";}console.log("开始压缩:",url);exePath = path.join("./lib/guetzli/", exePath);var params = ["--quality", jpgQuality];params.push(url, url);var childP = child_process.spawn(exePath, params);childP.stdout.on('data', function (data) {console.log("stdout:", data);});childP.stderr.on('data', function (data) {console.error("stderr:", data);console.error("compress fail pic:", url);});childP.on('close', function (code) {console.log("压缩完成:",url)if (completeHandler != null) {completeHandler(url);}});
}

工具使用说明

1.修改conf目录下的conf.json文件，将root_path配置正确（执行需要压缩图片的目录）

2.运行前执行npm install 命令安装依赖，目前就只用到md5模块。

下载路径：https://download.csdn.net/download/weixin_36719607/12238348

针对小游戏中PNG、JPG压缩工具优化（nodejs）相关推荐

解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题参考文章: (1)解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题 (2)https:// ...
在微信小游戏中开发一个贪食蛇
为什么80%的码农都做不了架构师?>>> 我自己也写过一个贪食蛇的小游戏,不过是对dom的操作,微信小游戏是采用js语法基于canvas的开发.为了省事在网上直接搜了一个基于c ...
在微信小游戏中实现语音互动
之前在unity里尝试用过语音控制,当时的想法是实时控制游戏角色的移动与攻击,这在通过在线api解析语义的方式下体验一般,不过也想到在实时性要求不那么高的互动场景应该可以用起来.这里就在微信小游戏中尝 ...
h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
用计算机打童年,童年向, 看看我们当初在电脑课玩的那些小游戏, 中枪的大多是90后...
原标题:童年向, 看看我们当初在电脑课玩的那些小游戏, 中枪的大多是90后童年向,看看我们当初在电脑课玩的那些小游戏,中枪的大多是90后还记得小时候玩电脑的时候,没有英雄联盟,没有绝地求生,没有穿 ...
从《LOL》谈游戏中的随机动作优化
原文链接:Random Acts of Optimization 作者:Tony Albrecht 译者:汪辰游戏开发人员面对的往往是一个长期持续演进的软件产品,如"英雄联盟" ...
针对小游戏的激励视频，如何通过数据分析提升广告收入
近年版号的限制,各个微信小游戏的厂商们都开始挖掘广告变现的价值.目前平台开放的广告变现模式有:Banner 广告.激励视频广告.插屏广告.格子广告.其中激励视频因其用户主动选择.不打断游戏连贯性.eC ...
基于CQRS的架构在答题PK小游戏中的实践案例
1. 前言 \\ 领域驱动设计(Domain-Driven Design,下文简称 DDD)在微服务时代成为了风口话题,而在 DDD 领域,我们常常看到命令查询与职责分离(Command and Qu ...
小游戏加载速度的优化
如果你正在从事小游戏开发的工作,标题里提到的这项技能我觉得是要必备的.有句话我觉得说的很正确"H5游戏的优势就是即点即玩,如果这点都做不到,就没什么优势了."虽然这项技术没什么难点 ...
threejs 微信小游戏中的离屏渲染做UI和排行榜
微信小游戏对threejs真的是一次桎酷啊...呵呵. 规定不能用html锁死了我们之前两个html标签的可能了... 不过微信还是允许了大家的离屏渲染,要不是我们在跳一跳之类的游戏中也看不到排行榜和 ...

针对小游戏中PNG、JPG压缩工具优化（nodejs）