App包瘦身（三） —— 基于imageOptim的大批量图片压

2021-11-22 本文已影响0人刀客传奇

版本记录

版本号	时间
V1.0	2021.11.22 星期一

前言

随着App的持续功能迭代和常年的运营，最终包都会越来越大，包太大苹果那边会给限制，不利于用户下载。所以App瘦身也是一项需要持续做的事。正好我这几天就在做瘦身的事，这里记录一下，大家一起学习和交流。感兴趣的可以看下面几篇文章。
1. App包瘦身（一） —— App包瘦身初探（一）
2. App包瘦身（二） —— 基于pre-commit的图片提交的自动化压缩（一）

主要内容

前面一篇2. App包瘦身（二） —— 基于pre-commit的图片提交的自动化压缩（一）中，针对提交的图片进行自动化压缩，但是分析起来，那个方案有几个缺点。

依赖tiny.png的三方服务的key使用是有限制的，一般一个key只能压缩500次，次数满了就要换key。
无法在某一个目录对已有图片进行大批量的压缩。只能针对新添加的图片进行自动压缩。

针对上面的缺点，这里又有一个新的方案，就是使用imageOptim对项目中或者目标文件夹里的图片进行大批量的压缩。

这个方案其实来自于ImageOptim-CLI。

imageOptim简介

首先我们看下要使用的程序imageOptim。可以直接去官网下载，它可以进行有损和无损压缩，安装好了应用程序如下所示。

启动页面如下所示：

这个下载问题就不多说了，大家应该没问题。

压缩前的配置工作

1. Homebrew

这个就不多说了吧，没有安装的直接搜命令行直接安装就行了。

2. 安装npm

就使用下面指令进行安装

brew install node

然后报错了

`xxxx@bogon ~ % brew install node`

`fatal: Could not resolve HEAD to a revision`

`==> Tapping homebrew/cask`

`Cloning into ``'/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask'``...`

`fatal: unable to access ``'[https://github.com/Homebrew/homebrew-cask/'](https://github.com/Homebrew/homebrew-cask/')``: Failed to connect to github.com port ``443``: Operation timed out`

`Error: Failure ``while` `executing; `git clone https:``//github.com/Homebrew/homebrew-cask /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask --origin=origin --template=` exited with 128.`

这个通过下面命令解决了

cd /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core
 
git fetch --prune origin
git pull --rebase origin master

然后我们继续执行brew install node命令。

xxx@bogon ~ % brew install node
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/manifests/1.0.9
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/blobs/sha256:9d3009fd246d0f6cf9fd11d0a3bd388f6c043c75fa302dec
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:9d3009fd246d0f6cf9fd11d0a3bd388f
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/c-ares/manifests/1.18.1
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/c-ares/blobs/sha256:d3dd43338a6003320bfc94466887a2336f2a8bb360913266
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:d3dd43338a6003320bfc94466887a233
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/manifests/69.1
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/blobs/sha256:d46b8ec5c3db629e7848e9fd31e5ec99ed952d9c81c8936a2
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:d46b8ec5c3db629e7848e9fd31e5ec99
####################################################                      73.2%
curl: (18) transfer closed with 7644301 bytes remaining to read
Error: node: Failed to download resource "icu4c"
Download failed: https://ghcr.io/v2/homebrew/core/icu4c/blobs/sha256:d46b8ec5c3db629e7848e9fd31e5ec99ed952d9c81c8936a2511fae803d831fd
xxx@bogon ~ %

就会发现又报错了。这个时间有点长了，忘记怎么去解决了，好像是brew update一下就好了。

这个问题解决以后就继续运行brew install node。输出如下，发现又报错了。

xxx@bogon ~ % brew install node
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/manifests/1.0.9
Already downloaded: /Users/xxx/Library/Caches/Homebrew/downloads/922ce7b351cec833f9bd2641f27d8ac011005f8b1f7e1119b8271cfb4c0d3cd7--brotli-1.0.9.bottle_manifest.json
... ... ... ...
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:4fbd4a9e3eb49c27e83bd125b0e76d386c0e12ae1139d4dc
######################################################################## 100.0%
Error: python@3.9: the bottle needs the Apple Command Line Tools to be installed.
  You can install them, if desired, with:
    xcode-select --install
 
 
You can try to install from source with:
  brew install --build-from-source python@3.9

这个下面提示了解决办法，可以直接运行命令brew install --build-from-source python@3.9。好了以后我们接着运行命令brew install node。就会发现仍然会报错。

xxx@bogon ~ % brew install node
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/manifests/1.0.9
Already downloaded: /Users/xxx/Library/Caches/Homebrew/downloads/922ce7b351cec833f9bd2641f27d8ac011005f8b1f7e1119b8271cfb4c0d3cd7--brotli-1.0.9.bottle_manifest.json
... ... ... ...
==> Downloading from https://pkg-containers.githubusercontent.com/ghcr1/blobs/sha256:96acaa07d3255dcb75370a296ea8977848ce155f6b1496df
###########################################################               83.2%
curl: (92) HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1)
Error: node: Failed to download resource "node"
Download failed: https://ghcr.io/v2/homebrew/core/node/blobs/sha256:96acaa07d3255dcb75370a296ea8977848ce155f6b1496df108f06ac5c492fa2
xxx@bogon ~ %

这个问题使用http版本1.1强制git就好了，运行下面命令：

git config --global http.version HTTP/1.1

继续brew install node

经过不懈努力，各种报错，终于安装成功了。

直接在控制台输入npm，输出如下所示：

xxx@bogon ~ % npm
npm <command>
 
 
Usage:
 
 
npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview
 
 
All commands:
 
 
    access, adduser, audit, bin, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    hook, init, install, install-ci-test, install-test, link,
    ll, login, logout, ls, org, outdated, owner, pack, ping,
    pkg, prefix, profile, prune, publish, rebuild, repo,
    restart, root, run-script, search, set, set-script,
    shrinkwrap, star, stars, start, stop, team, test, token,
    uninstall, unpublish, unstar, update, version, view, whoami
 
 
Specify configs in the ini-formatted file:
    /Users/xxx/.npmrc
or on the command line via: npm <command> --key=value
 
 
More configuration info: npm help config
Configuration fields: npm help 7 config
 
 
npm@8.1.0 /usr/local/lib/node_modules/npm

这就说明npm安装成功了。

3. 安装imageoptim-cli

运行下面命令行

brew install imageoptim-cli

这个很顺利，直接就成功了。

输入imageoptim --help

xxx@bogon ~ % imageoptim --help
Usage: [stdin] [options] [patterns...]
 
 
Options:
  -V, --version           output the version number
  -a, --imagealpha        enable ImageAlpha
  -j, --jpegmini          enable JPEGmini
  -C, --no-color          output to the terminal without colors
  -I, --no-imageoptim     disable ImageOptim
  -Q, --no-quit           do not quit apps once finished
  -S, --no-stats          do not display file size savings and quality loss information
  --number-of-colors <n>  ImageAlpha palette size, defaults to 256
  --quality <min>-<max>   ImageAlpha quality range from 0-100, defaults to 65-80
  --speed <n>             ImageAlpha speed from 1 (brute-force) to 10 (fastest), defaults to 1
  -h, --help              output usage information
 
 
  Supported Apps:
 
 
    ImageAlpha: https://pngmini.com
    ImageOptim: https://imageoptim.com
    JPEGmini Lite: https://itunes.apple.com/us/app/jpegmini-lite/id525742250
    JPEGmini Pro: https://itunes.apple.com/us/app/jpegmini-pro/id887163276
    JPEGmini: https://itunes.apple.com/us/app/jpegmini/id498944723
 
 
  Examples:
 
 
    Run ImageOptim.app over every image in current directory
    imageoptim
 
 
    Run ImageAlpha.app and ImageOptim.app over every PNG in current directory
    imageoptim --imagealpha '**/*.png'
 
 
    Run JPEGmini.app and ImageOptim.app over every JPG in current directory
    imageoptim --jpegmini '**/*.jpg' '**/*.jpeg'
 
 
    Run JPEGmini.app over every JPG in current directory
    imageoptim --jpegmini --no-imageoptim '**/*.jpg' '**/*.jpeg'
 
 
    Run ImageOptim.app over every image in a specific directory
    imageoptim '~/Desktop'
xxx@bogon ~ %

到此为止，所有的准备都基本结束了，下面我们就进行测试工作。

测试工作

1. 本地文件夹模拟测试

首先我们需要准备下测试资源。如下图所示：

运行下程序进行压缩

可以看见压缩成功了，下面我们看测试资源文件夹。

可以看见，原目录的图片从4.2M压缩到了787K。并且压缩图片替换了原有待压缩图片，这个就很爽了。

下面接着在测试文件夹放2张图片，继续使用imageOptim进行压缩，控制台输出如下：

2. 在主工程进行全量压缩

下面就使用imageOptim对项目文件夹进行全量的压缩。具体输出如下，非常长，大约耗时十分钟左右，中间就省略了。

i Running ImageOptim...
✓ /Users/xxx/Desktop/工程目录/Pod/BlordResources/Image/Mine/bts_blord_nav_back@3x.png was: 288B now: 286B saving: 2B (0.69%)
✓ /Users/xxx/Desktop/工程目录/Pod/BlordResources/Image/Mine/bts_common_icon_right@3x.png was: 375B now: 360B saving: 15B (4.00%)
✓ /Users/xxx/Desktop/工程目录/Pod/BlordResources/Image/Mine/bts_common_icon_right_arrow@3x.png was: 296B now: 280B saving: 16B (5.41%)
... ... ...  ...省略好多行
✓ TOTAL was: 773kB now: 723kB saving: 50.1kB (6.48%)
i Running ImageOptim...
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Image.xcassets/Order/bts_detail_comment_titleView.imageset/bts_detail_comment_titleView@3x.png was: 6.44kB now: 6.36kB saving: 86B (1.33%)
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Image.xcassets/Order/bts_detail_fee_note_icon.imageset/bts_detail_fee_note_icon@3x.png was: 391B now: 389B saving: 2B (0.51%)
... ... ...  ...省略好多行
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Animation.xcassets/Animation/safeCenter/2_img_1.imageset/2_img_1.png was: 1.64kB now: 1.64kB saving: 0B (0.00%)
✓ TOTAL was: 1.5MB now: 1.27MB saving: 229kB (15.29%)
i Running ImageOptim...
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Animation.xcassets/Animation/safeCenter/2_img_2.imageset/2_img_2.png was: 3.88kB now: 3.85kB saving: 25B (0.64%)
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Animation.xcassets/Animation/safeCenter/3_img_0.imageset/3_img_0.png was: 368B now: 356B saving: 12B (3.26%)
... ... ...  ...省略好多行
✓ /Users/xxx/Desktop/工程目录/Pod/Resources/Animation.xcassets/Animation/safeCenter/bts_sc_male_red/images/img_0.imageset/img_0.png was: 4.16kB now: 1.87kB saving: 2.29kB (55.01%)
✓ TOTAL was: 537kB now: 445kB saving: 91.2kB (16.99%)
✓ Finished

根据统计，一共压缩了几百张图片，节省空间400K左右，这就完成了对项目里所有图片的批量压缩。

后记

本篇主要讲述了基于imageOptim的大批量图片的压缩，感兴趣的给个赞或者关注~~~~