自如客Android端图片资源管理方案-一一网

本文将介绍自如客Android端对图片资源的管理方式，其中包括如何添加和使用图片，如何从图片方面降低包体积。

首先，自如客Android和iOS两端是高度组件化的，每端大大小小80多个组件，其中有一个专门存放图片资源的组件，我们叫它commonsrc组件，里面没有任何代码，只有图片。初期只是单纯把图片放到这里，其他组件如果要用图就引用commonsrc。

后来为了统一入口，规范图片命名，限制图片大小，管理组件与图片的依赖关系（也就是某个组件用到了哪些图片），就建立了图库系统。开发同学添加图片时，直接登录系统，选择组件，分支，将图片拖入上传区域，点击保存，然后系统会自动触发图片组建的构建，构建完成后发送微信消息通知上传人，上传者收到通知后，sync一下工程就能引用到想要的图片了。

之所以要选择组件和分支，是要建立组件——分支——图片三者之间的关系。意为哪个组件的哪个分支使用了哪些图片，当有分支合并时，我们hook了合并事件，相应的图片依赖关系会随着分支一起合并。建立这三者的关系后，图片关系就跟着组件和分支走，而不是跟着App走，以后多个App共用某组件时，不会将多余的图片引进来。

接下来详细说下commonsrc的构建过程。我们回收了开发同学图片组件的代码权限，大家无法直接在commonsrc添加图片。只保留了一个master分支的壳工程。当添加图片时，系统会触发打包机上的构建任务，构建脚本先将master分支check下来，然后下载图片资源包，将图片解压到commonsrc目录下，构建commonsrc组件，最后上传maven。

avatar

iOS端有个更棒的功能叫图片云控，iOS封装了统一的图片加载控件，除了加载图片以外，还会统计每个图片的加载次数，打包时，系统会将访问量较少的图片放在服务端，不再将这些图片打进安装包，从而降低包体积。

近期公司在做包体优化，图片资源自然是优化的重点，我们检查了一些图片文件，一些色调单一的图片有几百KB，这种图的压缩空间是最大的。首先想到webp，as上也有直接转webp的功能，试了一下效果还挺明显，50MB的图片组件转webp后降到15MB。但是总不能每次发版都手动转一遍，有三种方法可以自动转换，一是做个插件，编译时自动转webp，现成的方案也有，比如滴滴的Booster，第二是写个脚本放到打包机上，每次下载完图片自动转。但两者都会侵入构建流程，前者占用App打包时间，后者占用commonsrc打包时间。于是有了第三种方式，上传图片后直接在服务端转webp。其实这也是我们做图库系统的一个初衷，就是可以统一对资源做任何事情。

webp格式虽然好，但不能一概而论。自如客用的压缩比例是75%，为了防止个别图片压缩后失真严重，系统加了黑名单功能，可以对某些图片禁用webp格式。Android启动图标不能使用webp，只能用png格式，所以启动图的名字自然要加到黑名单中。

图库系统还支持指定分辨率下载图片包，这样我们可以只下载3倍图，所有2倍图占的空间又被省掉了。除了利用图库管理优化包体积，我们还使用了资源混淆和严格模式，以后的文章会介绍到。

作者：自如大前端研发中心-移动架构组-曲建超