Post Compress Image -构建后图片安全压缩扩展

引言

随着项目的迭代,包体积资源越来越大,构建后压缩图片资源成为必不可少的一环。论坛上已经有很多热心开发者提供了相关的解决方案,但在实际生产的过程中,发现有些图片经过构建后压缩会出现图像严重失真的问题。为了解决这一核心痛点问题,在原有流程中增加了像素比对流程,若像素超过一定的预期,则放弃本次压缩采用原图,从而确保操作的安全性。最后,首先感谢陈皮皮大佬之前的开源方案,为了反馈社区,相关的资料放到github-项目地址:GitHub - lyberlee/cocos-compressImage: cocos creator 构建之后压缩图片资源

以下是扩展的相关介绍:

概述

Post Compress Image 是一款专为 Cocos Creator 设计的安全高效的图片压缩扩展,它在构建后自动对图片资源进行解析和压缩,显著减小游戏包体积

亮点特性

  • 安全检测 :插件会在压缩前后对比像素差异,确保压缩后图片质量不受影响。若压缩结果不符合预期,插件会在 build/img_diff 目录下生成差异日志,告知用户像素差异点在哪,方便用户排查确认。

  • 图片格式兼容性 :使用 imagemin 相关压缩工具,理论上支持市面常见的图片格式:

安装使用步骤

  1. 下载 :从github下载插件并添加至项目的packages目录下;

  2. 安装依赖 :进入插件目录,执行 npm install 命令;

  3. 配置参数: 配置压缩参数,详情见下述说明:

  4. 日志输出:扩展会监听build-finished事件,然后执行后续的压缩操作;

兼容性说明

  • 插件已在 Cocos Creator 2.4.7 版本上测试使用,其他版本可能存在兼容性问题,需自行适配一下,但整体的优化思路是没问题。
5赞

sorry,连接上多打了个符号,您再试试。 :blush:

插个眼mark

可以了 :+1: :+1:

@boyue @shaoqiang.cai @feng 大佬们,看看能不能给个机会置顶,这个方案在投入生产环境还是非常有必要的,希望cocos后续会越来越好

话说为啥如何使用,有点看不懂嘞。
是把这些当做插件,放在 项目/packages 扩展中,然后构建就行了?

同问,我也有点不会使用 :sweat_smile:

是的,其实就是扩展,你放到packages/目录下使用即可

这个 与你感谢的的作者上 加入了什么新的操作吗?看你感谢的的作者支持 白名单 和白名单目录
你这个有的功能 可以实现你的这些功能啊 还有GUI 他的的那个也对比了大小 如果变大了 会显示压缩失败 有日志输出
希望作者把插件的亮点 目前看到 就一个 希望后期继续完善一些其他的 比如 jpg gif 其他格式的支持,甚至是音乐音效的支持

  • 像素差异检测 :插件会在压缩前后对比像素差异,确保压缩后图片质量不受影响。

最后还是感谢作者无私开源的精神,谢谢

非常谢谢阅读后的反馈建议,我这里调整了一下文章的格式排版,如有不当,欢迎再次交流

目前,插件使用的是imagemin相关工具,是支持jpg格式压缩。在实际的生产过程中,安全检测我觉得这一步足够重要,所以才迫不及待的想和大家分享方案。关于音效的支持,我也在想要不要集成进来,之前也做过这部分工作。但考虑到对这一块的专业知识不够,不知道如何去检测压缩操作会不会对原有音质产生影响,所以没有加入进来。最后非常感谢的您的建议,后续我再补充补充。 :blush:

好的 谢谢 下次出包,体验一下,音频压缩 可以考虑
image
这个工具

image

使用 helloworld 来使用这个扩展,好像一致卡 自定义构建流程。。。

image
npm install 的时候提示要 npm audit fix --force

如果 fix 的话,就会有报错

是不是有缺少了啥引入

安装依赖的时候报错,估计是node版本过高或过低,我本地node版本:v14.17.2,你可以切换到这个版本试一试。如果还有问题,看方便发一下demo工程给我排查一下吗。

我 node version 是 16.15.0 估计有点高,看来要降低一下看看

NewProject_1.zip (1.4 MB)

image 版本 14.17.2

image
大佬威武,无私开源,笔芯

谢谢,希望cocos 生态越来越好。:heart:

请问一下,node 降了版本,还是有问题吗