前语

在产品的运营期间,咱们发现Android用户对App容量巨细的敏感度明显高于iOS用户。

所以,为了进步产品在商场中竞争力,进一步进步产品的下载量,咱们需求对根据Flutter开发的Android客户端进行包体优化。

经过调研,咱们发现Flutter经过多年的发展后,DevTools已经完善,用较低的低成本即可满意需求。

下面咱们会从剖析开端,了解不同构成部分的容量分布状况。再对构成部分的特性来决议最终怎么进行包体优化。

生成剖析陈述

首先,在build产品时,咱们能够加上 --analyze-size 标识来生成剖析陈述。apk 和 appbundle 还能够指定产品的平台架构,如:--target-platform android-arm,剖析实践机型的状况。

# 变异产品
# Specify one of android-arm, android-arm64, or android-x64 in the --target-platform flag.
flutter build apk --analyze-size --target-platform android-arm64
flutter build appbundle --analyze-size --target-platform android-arm64

apk 剖析日志

app-release.apk (total compressed)                                         33 MB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  assets/
    dexopt                                                                  1 KB
    flutter_assets                                                          5 MB
  classes.dex                                                               7 MB
  lib/
    arm64-v8a                                                              18 MB
    Dart AOT symbols accounted decompressed size                            8 MB
      package:flutter                                                       3 MB
      package:image                                                       799 KB
      dart:core                                                           325 KB
      package:xxx_xxx_flutter                                             293 KB
      dart:ui                                                             279 KB
      dart:typed_data                                                     226 KB
      dart:io                                                             212 KB
      dart:collection                                                     177 KB
      package:vector_graphics_compiler                                    170 KB
      dart:async                                                          154 KB
      package:flutter_localizations                                       129 KB
      package:flutter_spinkit                                              99 KB
      package:extended_image                                               93 KB
      dart:ffi                                                             85 KB
      package:petitparser                                                  73 KB
      dart:convert                                                         62 KB
      package:archive                                                      62 KB
      package:dio                                                          57 KB
      package:vector_math                                                  54 KB
      package:riverpod                                                     49 KB
  AndroidManifest.xml                                                       3 KB
  res/
    -j.png                                                                  4 KB
    1k.png                                                                 33 KB
    1r.png                                                                 91 KB
    2M.png                                                                  3 KB
    33.9.png                                                                2 KB
    3m.png                                                                  1 KB
    4C.png                                                                  1 KB
    4F.png                                                                 10 KB
    AQ.png                                                                 33 KB
    Bj.png                                                                 29 KB
    CG.png                                                                 23 KB
    Ch.png                                                                 98 KB
    D2.png                                                                 14 KB
    E7.png                                                                 98 KB
    EA.png                                                                 98 KB
    ER.9.png                                                                2 KB
    FM.9.png                                                                1 KB
    Fo.png                                                                 29 KB
    G1.png                                                                  2 KB
    J6.9.png                                                                2 KB
    JO.png                                                                 29 KB
    Mr.9.png                                                                1 KB
    NF.png                                                                  6 KB
    Ni.png                                                                 33 KB
    ON.png                                                                 91 KB
    Pi.9.png                                                                3 KB
    Q11.9.png                                                               3 KB
    RX.png                                                                 16 KB
    S9.png                                                                  2 KB
    SD.png                                                                  5 KB
    Tu.png                                                                 10 KB
    Vq.png                                                                  1 KB
    Vw.png                                                                 71 KB
    WR.png                                                                 30 KB
    XU.png                                                                  1 KB
    Yj.png                                                                  4 KB
    _C.png                                                                  3 KB
    _f.png                                                                  2 KB
    bI.png                                                                  3 KB
    color-v23                                                               2 KB
    color                                                                  16 KB
    dn.png                                                                  2 KB
    e1.xml                                                                  1 KB
    eB.9.png                                                                2 KB
    fM.png                                                                  5 KB
    fR.png                                                                 67 KB
    gV.9.png                                                                1 KB
    jy.png                                                                  8 KB
    nN.png                                                                  4 KB
    qt.png                                                                  2 KB
    tj.9.png                                                                2 KB
    u3.png                                                                  3 KB
    wi.9.png                                                                2 KB
    wi1.9.png                                                               1 KB
    wn.png                                                                 10 KB
    x4.png                                                                  3 KB
    yT.png                                                                  1 KB
    zT.png                                                                 91 KB
  resources.arsc                                                          926 KB
  client_analytics.proto                                                    1 KB
  dc/
    a.gz                                                                   37 KB
  kotlin/
    collections                                                             1 KB
    kotlin.kotlin_builtins                                                  5 KB
    ranges                                                                  1 KB
    reflect                                                                 1 KB
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your APK analysis can be found at: /Users/xxx/.flutter-devtools/apk-code-size-analysis_01.json
To analyze your app size in Dart DevTools, run the following command:
dart devtools --appSizeBase=apk-code-size-analysis_01.json

appbundle 剖析日志

app-release.aab (total compressed)                                         18 MB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  BUNDLE-METADATA/
    assets.dexopt                                                           1 KB
    com.android.tools.build.libraries                                       8 KB
    com.android.tools.build.obfuscation                                   628 KB
  base/
    assets                                                                  5 MB
    dex                                                                     3 MB
    lib                                                                     8 MB
    Dart AOT symbols accounted decompressed size                            8 MB
      package:flutter                                                       3 MB
      package:image                                                       799 KB
      dart:core                                                           325 KB
      package:xxx_xxx_flutter                                             293 KB
      dart:ui                                                             279 KB
      dart:typed_data                                                     226 KB
      dart:io                                                             212 KB
      dart:collection                                                     177 KB
      package:vector_graphics_compiler                                    170 KB
      dart:async                                                          154 KB
      package:flutter_localizations                                       129 KB
      package:flutter_spinkit                                              99 KB
      package:extended_image                                               93 KB
      dart:ffi                                                             85 KB
      package:petitparser                                                  73 KB
      dart:convert                                                         62 KB
      package:archive                                                      62 KB
      package:dio                                                          57 KB
      package:vector_math                                                  54 KB
      package:riverpod                                                     49 KB
    manifest                                                                4 KB
    res                                                                     1 MB
    resources.pb                                                          292 KB
    root                                                                   51 KB
  META-INF/
    UPLOAD.SF                                                              46 KB
    UPLOAD.RSA                                                              1 KB
    MANIFEST.MF                                                            34 KB
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your AAB analysis can be found at: /Users/xxx/.flutter-devtools/aab-code-size-analysis_01.json
To analyze your app size in Dart DevTools, run the following command:
dart devtools --appSizeBase=aab-code-size-analysis_01.json
✓ Built build/app/outputs/bundle/release/app-release.aab (18.2MB).

解读剖析陈述

运用DevTools解读陈述

这儿以 VS Code DevTools 举例(Install and run DevTools from VS Code)

  • shift + cmd + p打开指令面板,再输入Open DevTools,打开面板。

  • 挑选App Size Tooling,打开,并挑选需求剖析的文件,途径在生成陈述时会供给(如:/Users/xxx/.flutter-devtools/aab-code-size-analysis_01.json)

探索Flutter包体优化

以上图为例,appbundle在未紧缩的状况下, 体积为23.1MB,其中base占有了首要的容量。

base中占有首要巨细的别离有lib (8MB)、assest (5MB)、dex (3MB)、res (1.2MB)。

剖析内容物能够得出:

  • lib,Flutter端的代码完成以及依靠库。
  • assets,Flutter端运用到的资源文件。
  • dex,原生端的代码完成以及依靠库。
  • res,原生端运用到的资源文件。

除掉这些首要的文件内容,剩余的多位配置文件,所占容量的比例也不大,可优化空间不大。

可探究的优化方向

第一步,通过优化资料能够直接减少包体内容的巨细。

  • 下降视频资料的分辨率和质量

  • 多运用jpg、svg等高紧缩率的图片资料

  • 运用IconFont替换icon的图片资料

  • 运用网络资料,替换本地资料,比方运用网络图片/视频,网络资料包等。

  • 运用GoogleFonts替代本地Fonts。

第二步,减少不必要的代码模块。

  • 查看 pubspec.yaml 并删除未运用的库/包。
  • 对第三方库进行精简定制,再引进运用,删除不需求的功用。
  • 运用Flutter供给的精简代码功用,对产品代码进行重定义。

下面介绍下Flutter供给的精简代码功用。

精简代码

在build产品时,添加 --obfuscate--split-debug-info 来完成对代码的混杂,以及对代码的精简。

  • --split-debug-info ,提取调试信息,完成精简代码,可单独运用。
  • --obfuscate,敞开代码混杂,进步代码反编译门槛。
# 指定android-arm64平台,在当前途径输出符号表(如`app.android-arm64.symbols`)
flutter build appbundle --target-platform android-arm64 --split-debug-info=. 

未精简的日志

flutter build appbundle --target-platform android-arm64
Running Gradle task 'bundleRelease'...                          
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 3124 bytes (99.8% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Running Gradle task 'bundleRelease'...                             26.7s
✓ Built build/app/outputs/bundle/release/app-release.aab (18.2MB).

精简后的日志

flutter build appbundle --target-platform android-arm64 --split-debug-info=.
Running Gradle task 'bundleRelease'...                          
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 3124 bytes (99.8% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Running Gradle task 'bundleRelease'...                             56.6s
✓ Built build/app/outputs/bundle/release/app-release.aab (17.6MB).

敞开混杂的日志

flutter build appbundle --target-platform android-arm64 --split-debug-info=.  --obfuscate
Running Gradle task 'bundleRelease'...                          
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 3124 bytes (99.8% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Running Gradle task 'bundleRelease'...                             57.5s
✓ Built build/app/outputs/bundle/release/app-release.aab (17.6MB).

读取混杂的堆栈盯梢

如需求调试被混杂的应用程序创建的堆栈盯梢,请遵从以下过程将其解析为可读的内容:

  • 找到与应用程序匹配的符号文件。例如,在 Android arm64 设备崩溃时,需求 app.android-arm64.symbols 文件。

  • flutter symbolize 指令供给堆栈盯梢(存储在文件中)和符号文件。例如:

flutter symbolize -i <stack trace file> -d out/android/app.android-arm64.symbols

总结

在资料和代码模块的两个方向上进行包体优化,是比较简单操作,并且不会影响App稳定性的方案。

在出包的工作流中,咱们会启用精简代码以及代码混杂,优化产品中代码所占的体积。

排查已经引进的依靠库,看是否存在未运用或许已经弃用的多余依靠。同时剖析占容量较大的三方依靠,判断是否需求通过精简定制来下降容量。

最终是排查资料,筛选体积,对不达标的资料进行从头制作,或许寻觅替代方案,比方改用网络资源。

参阅

Obfuscating The Flutter App

Mastering Dart & Flutter DevTools — Part 3: App Size Tool

Reducing Flutter App Size

Using the app size tool