给项目瘦身, CocosCreator项目资源清理工具-AssetCleaner教程

AssetCleanerForCocosCreator

简介:一个基于Node.js的CocosCreator项目资源清理工具,自动化统计有哪些资源未使用,以及各类型资源的占比情况,从而帮助减小包体。

代码地址:https://github.com/foupwang/AssetCleanerForCocosCreator

为什么需要AssetCleaner

  • 随着产品功能增加、版本迭代、需求变更,项目资源越来越臃肿,其中有不少不再使用或未及时删除的资源(不仅仅是图片,还包括序列帧动画、Spine动画、Prefab等等),如何知道哪些资源是可以删除的?一个个手动查找是不能忍受的。
  • 产品上线前,优化包体大小是不可避免的问题,包体里究竟有什么资源?哪些资源最占空间?它们的分布比例怎样?

想象以下场景:游戏准备上线,你出完版本正要歇口气,老板难以置信的看着你:咱就这么点功能,为什么包体有50MB?能减到10MB吗?你:…。现在通过AssetCleaner一键分析后,你可以从容回答:其实代码只占了1MB,剩余49MB是因为UI图片有xxMB、Spine动画有xxMB、音效有xxMB、配置表有xxMB…

  • 非动态加载的资源,错误地放到了resources目录,增加网络下载和包体的负担。如何找出它们?

CocosCreator官方建议:非动态加载的资源不要放在resources目录,否则会增大包体和settings.js大小,且无用资源无法在构建过程中自动剔除。

当项目资源数超过1000个时,以上问题变得更加突出,AssetCleaner为解决以上资源优化问题而生。

AssetCleaner功能

  • 查找未使用资源。自动查找assets目录下所有未引用的资源,并把结果输出到指定文件,方便开发者核对无误后删除。
  • 分析包体。自动统计指定目录下所有文件信息,并按类型区分从大到小输出到指定文件,方便后续分析做重点优化。
  • 资源优化。自动统计resources目录下非动态加载的资源,方便开发者核对后移动到非resources目录。

支持以下文件类型

1).png/.jpg/.webp(包括普通图片、图集、Spine、DragonBone、艺术数字)

2).prefab/.fire

3).anim

4).js/.ts代码

下图为查找未使用资源的输出示例

下图为统计assets原始资源的输出示例

下图为统计构建后资源web-mobile的输出示例

AssetCleaner使用

AssetCleaner基于Node.js开发,所以需要先安装Node.js,我的测试环境是:Node.js 10.14.2 + Win10 + CocosCreator 2.1.2

目前支持以下两种命令

node main.js -clean 项目资源目录 结果输出文件  	// 查找未使用资源
node main.js -size 项目资源目录 结果输出文件	// 按类型统计目录下所有文件从大到小排序

例如,CocosCreator项目路径是d:/myproject,则进入AssetCleaner的脚本代码目录。

1)查找未使用资源。命令行输入:

node main.js -clean d:/myproject/assets d:/out.txt

查找结果将会输出到d:/out.txt文件。

2)按类型统计assets目录下所有原始资源。命令行输入:

node main.js -size d:/myproject/assets d:/out.txt

查找结果输出到d:/out.txt文件。

3)按类型统计构建后的build/web-mobile目录下所有文件。命令行输入:

node main.js -size d:/myproject/build/web-mobile d:/out.txt

查找结果输出到d:/out.txt文件。

QA

1、AssetCleaner会自动清除文件吗?

不会。AssetCleaner只是分析并把统计结果输出到文件,实际删除需自己手动操作。

2、AssetCleaner为什么不做成Creator插件?

命令行可以更好的结合自动化构建流程,便于拓展。

3、为什么有些资源明明是有用的,但也被认为是未引用资源?

一般是因为资源命名不一致造成的。例如:对于艺术数字类型,如果图片名是font_01.png,则描述文件应是font_01.labelatlas;对于Spine动画,如果图片名是light_01.png,则描述文件应是light_01.atlas和light_01.json;否则该图片可能被认为是未引用。

4、AssetCleaner的局限

查找未使用资源的功能,目前主要适用于非resources目录。对于resources目录,因为原则上resources目录只存放动态加载资源,而动态加载的资源名在代码里多数情况下是变量,暂时没找到有效匹配方案,所以目前只是试验性地支持resources目录的.prefab类型(完全匹配)。期待技术大佬们加入这个开源项目,一起完善它。

交流

欢迎关注微信公众号“楚游香”,做进一步的技术交流。

30赞

不明觉厉 绑定

666 大佬厉害 用下看看

简单说,脚本的功能就是自动查找工程中有哪些资源是可删除的。

软件商店里也有一个插件,一样的功能

mark.以后应该用得上

感谢提醒,查了下,的确是有这款插件,这位朋友和我想一块了,不过当然我的功能更强大啦 :slight_smile:

  • 1、不只是查找图片资源,还可以查找艺术数字、.prefab、.anim等等。例如,对于一个有几百个prefab的大项目,很可能会发现有几十个prefab是没用的;
  • 2、可以分析构建后的包体内容,哪些资源占了主要空间一目了然;
  • 3、基于Node.js原生代码,分析几千个资源的项目也只需几秒钟;

最后,本脚本开源免费,各位大佬觉得不满意,可随手即改即用~

1赞

mark一下

Mark 好用!

mark

mark

我在1.43 上也做了类似的脚本,导出未引用资源列表, 不过没有楼主的分析统计.
但是还是几个功能仅供参考

  1. 增加文件夹过滤配置文件. 对于一些动态引用的资源可以手动添加到这里
  2. 把 未引用的资源名字通过搜索代码查找,把结果单独记录到一个文件,方便判断是否代码有动态引用.一旦确定后可以把它加到 1 的配置里.
  3. 未引用资源单独 生成一个json文件.(前提人工将需要的资源放入1 ), 方便使用脚本一键删除.

感谢提醒,这是个不错的方案。

考虑到动态资源名字是个变量,所以我目前在代码里指定忽略了resources目录,后续计划加入模糊识别resources资源的功能。

mark

mark

resources 文件夹中的资源,可以引用文件夹外部的其它资源,同样也可以被外部场景或资源引用到。项目构建时,除了已在 构建发布 面板勾选的场景外,resources 文件夹中的所有资源,连同它们关联依赖的 resources 文件夹外部的资源,都会被导出。

如果一份资源仅仅是被 resources 中的其它资源所依赖,而不需要直接被 cc.loader.loadRes 调用,那么 请不要 放在 resources 文件夹里。否则会增大包体和 settings.js 的大小,并且项目中无用的资源,将无法在构建的过程中自动剔除。同时在构建过程中,JSON 的自动合并策略也将受到影响,无法尽可能将零碎的 JSON 合并起来。

理论上,该脚本应该用来排除 resources 文件夹中未引用的资源.
对于非resources 文件夹中的资源,在构建的时候,如果未被 场景,resources 中资源 所依赖, 会自动剔除.

我在之前的项目中须要用到资源排除,主要是当时未能理解资源位置存储. 所以需要写脚本排除依赖. 后来的项目,除了在代码会动态加载资源(Prefab,mp3,少数图集,spine动画)放到resource中,其他都放到resources文件夹外部了.构建的时候也就会自动剔除未用到的资源.
当然,用这个脚本可以减少项目资源冗余.毕竟有时候升级UI,旧版本资源可能会忘了删除.虽然构建的时候也会剔除掉

mark

标志一下,以后用得到

是,大佬说的没错 :+1:

mark