Cocos Creator 项目资源清理工具推荐： AssetCleaner

AssetCleaner 是一个基于 Node.js 的 Cocos Creator 项目资源清理工具，它可以自动化统计有哪些资源未使用，以及各类型资源的占比情况，从而帮助开发者进行资源优化、减小包体大小。

为什么需要 AssetCleaner？

随着产品功能增加、版本迭代、需求变更，项目资源越来越臃肿，其中有不少不再使用或未及时删除的资源，包括图片、序列帧动画、Spine 动画、Prefab 等等，一个个儿手动查找可删除的资源需要花费大量的时间成本。

产品上线前，优化包体大小是非常必要的，优化的基础，是充分了解包体中究竟有哪些资源、什么资源最占空间、资源分布比例如何。

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

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

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

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

AssetCleaner 的功能

查找未使用资源。自动查找 assets 目录下所有未引用的资源，并把结果输出到指定文件，方便开发者核对无误后删除。

分析包体。自动统计指定目录下所有文件信息，并按类型区分从大到小输出到指定文件，方便后续分析做重点优化。

资源优化。自动统计 resources 目录下非动态加载的资源，方便开发者核对后移动到非 resources 目录。

支持文件类型：

• png/.jpg/.webp（包括普通图片、图集、Spine、DragonBone、艺术数字）

• prefab/.fire

• anim

• js/.ts代码

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

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

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

AssetCleaner 的使用方法

AssetCleaner 基于 Node.js 开发，所以需要先安装 Node.js。

我的测试环境是：

• Node.js 10.14.2 

• Win10

• Cocos Creator 2.1.2

目前支持以下两种命令：

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

例如，Cocos Creator 项目路径是 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 文件。

Q&A

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

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

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

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

3、AssetCleaner 的局限

查找未使用资源的功能，目前主要适用于非 resources 目录。

对于 resources 目录，因为原则上 resources 目录只存放动态加载资源，而动态加载的资源名在代码里多数情况下是变量，暂时没找到有效匹配方案，所以目前只是试验性地支持 resources 目录的 .prefab 类型（完全匹配）。

期待技术大佬们加入这个开源项目，一起完善它。

代码地址

https://github.com/foupwang/AssetCleanerForCocosCreator

非常感谢楚游香带来的工具分享，点击文末【阅读原文】按钮，可进入论坛原贴。感兴趣的开发者亦可以关注他的个人公众号，做进一步的技术交流。

如果您在使用 Cocos Creator 的过程中，获得了独到的开发心得、见解或是方法，并且乐于分享出来，帮助更多开发者解决技术问题，加速游戏开发效率，期待您与我们联系！

Cocos 荣耀讲师活动第1期征稿倒计时还有1周，感兴趣的开发者抓紧投稿喔！

活动地址：

https://forum.cocos.com/t/cocos/83536/14

更

多

精

彩

零基础入门 Creator 3D,奉上这篇纯干货!

极限开发《TheCode》和《Shoot the F》创作笔记

Cocos Creator 2.1.3 正式发布

Cocos 荣耀讲师征集计划

微信创意小游戏橙皮书发布

用 Cocos Creator 制作平台跳跃游戏

Cocos技术派|3D小游戏《快上车》技术分享

Gameloft 如何打造 Facebook 小游戏玩转越南市场

Cocos Creator 零基础入门教程 | 免费

Cocos 引擎 UI 全新升级：进一步提升编辑器体验

我就知道你“在看”▼