缺点: 1. 不能解决模块划后,业务间的图片引用,删除谨慎; 2. 使用 xcassest 管理资源图片,如果 .imageset 和图片名命名不统一的话,扫描失败. 复制代码
反其道而行之 (1) 通过 cartool 打开 Assets.car 中的文件; (2) 通过 find 检索出所有资源图片; (3) 通过脚本去遍历,可执行文件中的 __TEXT,动态库,jsbundle,xib 等文件判断 ipa 中的资源图片是否存在无用图片. 复制代码
2. 建立公共资源库,去除各模块中的重复图片
原理:大小比较 > 部分MD5签名比较 > 全MD5签名比较 > 字节到字节的比较 $ brew install fdupes $ fdupes -r ~/path # 搜索重复子文件在终端展示 $ fdupes -Sr ~/path # 搜索重复子文件&显示每个重复文件的大小在终端展示 $ fdupes -Sr ~/path > ~/log.txt # log输出到指定路径文件夹 复制代码
3. 压缩图片
无损压缩,通过删除图片中不必要的元数据,实现优化图片大小 XCode 在编译的时候会对 png 图片进行 recompress,生成苹果爸爸喜欢的 CgBI 格式,会重新添加删除掉的元数据,为了优化图片解码,减少不必要的 GPU 和 CPU 的开销; 复制代码
可参考: imageoptim Xcode's built-in (de)optimization PNG compression and iOS apps Optimizing App Assets Working with Wide Color
针对 imageoptim Xcode's built-in (de)optimization 中提到: COMPRESS_PNG_FILES = NO; 亲测设置为 NO,还是会 recompress.
以下为选取了 10 张大图做的测试,这个 10 张图片使用 ImageOptim 压缩过的,Assets.car 中他图片是使用 cartool 打开查看文件大小;未经过压缩的图片,不会出现这样的原图 和 ipa 中图片大小不一样的差异。
原理:量化相似的颜色,将 24-bit 的 PNG 图片转换成 8-bit 的 PNG 图片 && 删除不必要的元数据。 其中包括了 上文提到的删除不必要元数据 && png24 -> png8 ,由上文可知只有减少颜色数据一个优化点会生效,官网的 70% 压缩比也会大打折扣。 缺点:图片降质,压缩后需要设计师 check. 复制代码
可参考: tinypngMac Release 下载 注册 tingpngMac AppKey
结论: (1)使用 imageoptim 无损压缩,放入 Assets.car 中的图片压缩后可以 100% recompress 到原图大小,未放入 Assest.car 中的图片没有 100% recompress 到原图大小; (2)未放入 Assets.car 中的 jpg 不受 recompress 影响会增大; (3)imageoptim 压缩后的图片放入 bundle 中,也不会受 recompress 无效,不会增大; (4)有损压缩有效,不过效果因为 recompress 效果大打折扣。
4. 分析 ipa 中的图片大小占用比例
针对上述的一删二去三压,三板斧过后就需要,静下心来来分析一下目前的 ipa 包中的图片大小数量组成。 通过对公司的 App 数据采样分析,其中 4%的图片数量占据了 66%空间大小。 将这个 4% 的不放入 Assets.car && 只保留 3x 图,使用 TestFlight 测试安装包大小减少了 31 M, 继续优化将这个 4% 得图片删除,或者转网络下载以后安装包大小优化更加可观。 如果没有类似的问题,可以忽略 复制代码
5. 转网络下载
终极大招 还支持 iOS 8 的话,需要自己开发管理工具
从 iOS9 以后开始支持可以使用 On Demand Resources,网上介绍很多,不再赘述。
6. Build Settings 开启 ASSETCATALOG_COMPILER_OPTIMIZATION space 空间优化
Build Settings -> ASSETCATALOG_COMPILER_OPTIMIZATION -> 开启 space 可以优化 30%~40% 可以优化 Assets.car 大小 复制代码
7. XCode 10 vs XCode 9 Assets.car 的不同
使用 XCode 10 打包后 Assets.car 大小会比 Xcode 9 的大小大 30% 左右。正常现象,App Thinning 实际分发安装包大小没有变,通过测试公司 App Xcode 10 打包后,删除 App 后重新安装未使用大小比 AppStore 上下面显示的安装大小要小 10%。 "assets.car" size nearly doubled while using Xcode 10 GM seed
8. 针对统一图片集中颜色,可以使用 Iconfont 字体图标
优化策略
(1)优先使用网络下载; (2)充分使用 Asset Catalog,尽可能将图片放入 Asset Catalog 中; (3)完成步骤 2 后,打包生成 ipa 包,分析 Assets.car 中是否存在有大图,例如 20KB 以上; (4)步骤 3 之后存在大图,如果使用 alpha 通道使用 tinypng 压缩后放置 bundle 中只保留 3 倍图供使用,如果可以只用 2 倍更好,没有使用 alpha 通道的可以选择转 jpg 获得更大压缩空间。
工具篇
1. 快速统计工程中图片数量 && 大小
# 显示当前路径的 .png && .jpg 图片 $ find $PWD | egrep '\.(png|jpg)$' # 统计当前路径的 .png && .jpg 图片数量 $ find $PWD | egrep -c '\.(png|jpg)$' # 统计当前路径的 .png && .jpg 图片总大小(图片命名不存在空格) $ find $PWD | egrep '\.(png|jpg)$' | xargs ls -l | awk '{print $5}' | awk '{sum1 += $1}END{print sum1}'. # 因为图片命名不规范存在有空格,Linux 中默认使用空格分割,所以先输出 .txt 再改变 $ find $PWD | egrep '\.(png|jpg)$' > OUTPUT_FILE_PATH.txt $ cat OUTPUT_FILE_PATH.txt | tr '\n' '\0' | xargs -0 ls -l | awk '{print $5}' | awk '{sum1 += $1}END{print sum1}'. # 不递归遍历,只查看当前目录下图片(-maxdepth 1 设置查询深度) $ find $PWD -maxdepth 1 | egrep '\.(png|jpg)$' 复制代码
2. 查看 Assets.car 中的文件
方法一:cartool 解压 Assets.car 文件到指定路径
# https://github.com/steventroughtonsmith/cartool # output_dir 得先创建 $ ./cartool /path/to/Assets.car /path/to/outputDirectory 复制代码
方法二:AssetCatalogTinkerer 可直接查看 Assets.car 中的图片
# https://github.com/insidegui/AssetCatalogTinkerer # http://stackoverflow.com/questions/22630418/analysing-assets-car-file-in-ios 复制代码
3. 判断 png 图片是否使用 Alpha
$ brew install imagemagick $ identify IMAGE_PATH # 查看图片信息 $ identify -format %A IMAGE_PATH # Blend 使用 alpha 通道,Undefined 未使用 alpha 通道 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 图片上传系统在淘系中的实践
- 网页图片等比例缩小实现方案总结以及最佳实践
- 前端智能化实践:从图片识别 UI 样式
- Webpack 4 构建大型项目实践 / 处理图片、样式和字体
- axios上传图片,koa2接收保存上传的图片,lrz在上传前压缩图片
- Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。