美文网首页
CocosCreator-项目资源优化工具-AssetClean

CocosCreator-项目资源优化工具-AssetClean

作者: 程序猿TODO | 来源:发表于2021-04-13 09:30 被阅读0次

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类型(完全匹配)。期待技术大佬们加入这个开源项目,一起完善它。

相关文章

  • CocosCreator-项目资源优化工具-AssetClean

    AssetCleanerForCocosCreator 简介:一个基于Node.js的CocosCreator项目...

  • 如何减少apk体积

    lint工具优化 使用Lint工具优化,减少项目中没有引用的图片资源和优化xml布局android studio执...

  • webpack打包体积优化

    基于webpack的可视化资源分析工具webpack-bundle-analyzer分析优化项目资源。 安装web...

  • 资源平衡与资源平滑

    资源平衡与资源平滑是项目进度(时间)管理知识领域里,制定进度计划这个过程的工具资源优化下的两种技术,因为二者比较类...

  • 资源平衡与资源平滑

    资源平衡与资源平滑是项目进度(时间)管理知识领域里,制定进度计划这个过程的工具资源优化下的两种技术,因为二者比较类...

  • 社会实践阳泉市盂县县优化教育资源

    社会实践:阳泉市盂县优化教育资源 项目名称:阳泉市盂县优化教育资源 项目负责人:李鑫 项目成员:刘晓琴、郭亚辉、焦...

  • iOS 优化

    资源优化:对资源文件下手,压缩图片/音频,去除不必要的资源iOS项目瘦身,删除无用图片,批量压缩图片 编译优化:r...

  • gulp学习笔记

    gulp 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化...

  • 前端性能优化及检测工具

    [TOC] chrome性能优化检测工具 1.谷歌浏览器工具资源管理工具network查看 识别network单个...

  • 使用gulp解决页面缓存

    Gulp gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在...

网友评论

      本文标题:CocosCreator-项目资源优化工具-AssetClean

      本文链接:https://www.haomeiwen.com/subject/apkrhltx.html