Agile Alliance 我们的APP"减肥"成功了-京东云开发者社区

#### 一、自我介绍
大家好，这里是可爱又帅气的快递技术部-京驿货车敏捷小组。很骄傲的说,我们正在打造一款关于合理利用社会闲散运力，降低运输成本的个体司机抢单运输平台，她的名字叫京驿货车。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/d0563487-2cde-4c14-9487-84c3a820ce8f20210127093811.png)</center>

##### 可爱的她有几个非常美丽的目标:
1. 第一个就是打造成为**京东物流的司机端品牌**。
2. 第二个目标就是可以帮助更多人**解决赚钱问题和找车用车问题**!
3. 第三个伟大的目标就是**让自己变得更加优秀**,成为"人见人爱"的小可爱,人人都说我很好!

虽说可能路还很遥远,她的"对手"也特别多，但是她一直不放弃,这不在大家都喊着减肥的夏天,她也顺应潮流加入了减肥大军，并且终于"减肥"成功。【撒花】

#### 二、为什么要"减肥"
![](//img1.jcloudcs.com/developer.jdcloud.com/8b44e82c-429a-4826-8533-4060bfc9be2820210127093956.png)

由于京驿货车的用户都是开大货车的司机师傅们，我们的用户拉新大部分都是通过线下地推与线上分享的形势进行的，让司机师傅通过现场扫二维码或者直接下载APP，指导他们入驻与操作使用APP。

司机师傅第一步要做的就是下载APP，这个时候，如果APP的包很大，再加上现场网络环境复杂和信号不好，那要下载一个50M以上的包就要下载很久，而且还很耗费流量。如果司机师傅没有耐心等到下载安装完成，就会对我们产生不好的第一印象，让我们的体验与感受从第一步就输在了起跑线上。

**所以为了提高我们的用户对APP的初体验及拉新成功率，我们必须要痛下决心减小APP的包大小。**

#### 三、如何"减肥"
京驿货车APP前期为了快速迭代上线，是使用Flutter技术和原生混合组成的，新的界面使用Flutter开发，老的界面复用原有的原生界面和逻辑，这样导致我们引入Flutter框架就要增加一些APP体积，原生代码部分，引用了很多库，也增加了一部分APP体积。

##### 原生部分
- 在今年的不断迭代中，我们逐渐把原生部分慢慢都转化为了Flutter。这样在原生这块基本就可以去掉很大一部分原生库和原生包下的图片。
- 除此之外，我们在打包过程中可以只使用一套lib标准(比如armeabi)，在我们项目中，这样可以减少9.5M。

##### 图片部分
图片也是项目中占用体积很大的一块，我们首先把所有图片都进行了一轮压缩。

因为我们界面使用的都是Flutter开发的，我们尝试去掉了包里的三倍图，试了多个机型发现也没有什么问题，如果这块也没有适配问题的话，就能减掉很大一块体积。后期这块我们会尝试多个机型看有无适配问题。

##### 适配部分
由于我们删除了三倍图，会导致一些宽高写死的图片在高分辨率的手机上显示偏小。所以我们想到了用屏宽适配来解决这个问题。效果如下图，两款不同分辨率手机显示效果一致：

![](//img1.jcloudcs.com/developer.jdcloud.com/89035785-b770-4c62-82a3-466f305b5d6f20210127094207.jpg)

**解决方案：**
![](//img1.jcloudcs.com/developer.jdcloud.com/1b1bfc90-b318-4906-aed3-2dd2734b8b2820210127094258.png)
<center>图1</center>

![](//img1.jcloudcs.com/developer.jdcloud.com/70d4ef98-9047-41b1-94ba-90c6e9afb36a20210127094326.png)
<center>图2</center>

![](//img1.jcloudcs.com/developer.jdcloud.com/e2f55bab-01b0-4dae-93f3-2578b4cac57a20210127094359.png)
<center>图3</center>

在图1中可以看到，首先在项目的入口处，根据UI设计师给的设计标准，设置了屏幕宽度为375pt/dp。项目里所有的宽高都是根据此值动态计算的。

在图2中可以看到，项目中给图片设置宽高时，都在数值后面加了.w，.w的作用就是根据宽度375的标准和真实屏幕的宽度进行比例计算，来得出该控件的实际显示宽度和高度，从而使图片达到在不同分辨率机型上显示效果一致。

在图3中可以看到，.w是采用了Flutter1.12版本之后新出的extention特性，方便开发者进行屏幕适配调用。

##### 字体部分
为了进一步减少包的体积，我们发现还可以在文字上"做点手脚"，比如有一些图片中包含文字，这一部分可以使用代码实现，比如下图
![](//img1.jcloudcs.com/developer.jdcloud.com/b0f3c7fd-e0bb-48f8-81ba-537cc550f82820210127094506.png)

设计师一般给的是一张图片，但我们可以采用**背景色加文字控件的代码**方式来实现相同效果。项目中这种不同状态类型的标签图片很多的话，去掉这些也可以在瘦身的道路上又前进一步。

如果你的项目中有很多地方需要显示如下图的字体效果，我们可以使用**字体库**来代替图片。但是要衡量下引入的字体库的大下和项目里图片的大小对比，否则引入的库比现有的图片还大就有点得不偿失了。

![](//img1.jcloudcs.com/developer.jdcloud.com/c624fc86-df71-4a82-9b26-ee30baf853ce20210127094601.png)

#### 四、“减肥”成果
"减肥"前，可以从下面的图里左上角看到APP包大小42.6MB。
“减肥”且去掉三倍图片后，可以从下面图里左上角看到APP包大小为22.2MB。包体积大小减少了约 52%左右。

#### 五、未来极限“减肥”方向
结合我们的项目使用的技术，未来“减肥”的方向和目标就主要落在Flutter编译的产物和Flutter引擎方面。这块对我们团队来说也是极大的挑战，首先要了解Flutter引擎源码，看哪方面是可以去掉但不影响正常运行的，再就是编译产物这块看有没有瘦身的可能性。大家在APP瘦身方面如果有更好的方案或想法，也可以与我们联系，一起讨论、学习、进步。感谢大家！

最最最后，再次感谢所有京驿货车敏捷小组的小伙伴们付出的努力与汗水，因为有你，京驿才会更加精益。

------------
###### Being Agile 京东物流技术发展部效能提升部
###### 作者： 快递技术部  乔久元