作者：閑魚技術-三蒞

背景

閑魚技術團隊于2018年上半年率先引入了Flutter技術實現(xiàn)客戶端開發(fā)，到目前為止成功改造并上線了復雜的商品詳情和發(fā)布業(yè)務。隨著改造業(yè)務的增多，安裝包體積急劇上增。安裝包體積決定了用戶等待下載的時間和可能會耗費的流量，如何控制安裝包體積，減小flutter產(chǎn)物的大小成為當務之急。本文從閑魚客戶端項目實踐角度給出了一些通用的包大小檢測以及優(yōu)化方案，希望為準備轉型Flutter的團隊提供參考。

閑魚客戶端采用的Flutter和Native混合開發(fā)的模式，下面我們以ios端為例分析項目中flutter產(chǎn)物的大小（ipa包瘦身需求更為急切）。

ios工程對Flutter有如下依賴：

• Flutter.framework：Flutter庫和引擎
• App.framework：dart業(yè)務源碼相關文件
• Flutter Plugin：編譯出來的各種plugin的framework
• flutter_assets：Flutter依賴的靜態(tài)資源，如字體，圖片等

第一次引入flutter版本改造詳情頁后，ipa包大小增加近20M，其中包括flutter引擎代碼+被改造業(yè)務代碼，繼續(xù)發(fā)布頁flutter改造后，ipa增加4M+。進一步分析解壓ipa文件后發(fā)現(xiàn)Flutter.framework穩(wěn)定保持在20M+的大小, 增加新的flutter業(yè)務——發(fā)布頁之后，App.framework增幅近10M!

Flutter.framework是Flutter庫和引擎的代碼，我們能做的優(yōu)化空間有限，先把目標放在dart業(yè)務相關的文件App.framework上。

Flutter產(chǎn)物大小分析

執(zhí)行如下命令編譯出一個release模式下的App.framework，并使用print-snapshot-sizes參數(shù)打印出產(chǎn)物具體大小

flutter build aot --release --extra-gen-snapshot-options=--print-snapshot-sizes 

結果如下：

Building AOT snapshot in release mode (android-arm-release)... VMIsolate(CodeSize): 4660 Isolate(CodeSize): 2585632 ReadOnlyData(CodeSize): 2693576 Instructions(CodeSize): 8064816 Total(CodeSize): 13348684 Built to build/aot/. 

Instructions：代表AOT編譯后生成的二進制代碼大小

ReadOnlyData：代表生成二進制代碼的元數(shù)據(jù)（例如PcDescriptor， StackMap，CodeSourceMap等）和字符串大小

VMIsolate/Isolate：代表剩下的對象的大小總和（例如代碼中定義的常量和虛擬機特定元數(shù)據(jù)）

具體到業(yè)務層，想要分析各個業(yè)務模塊所占用的大小該怎么辦呢？

1. 執(zhí)行如下命令編譯出一個arm64架構的App.framework,并將它的包組成結構放到指定目錄build/aot.json文件中

   flutter --suppress-analytics build aot --output-dir=build/aot --target-platform=ios --target=lib/main.dart --release --ios-arch=arm64 --extra-gen-snapshot-options="--dwarf_stack_traces,--print-snapshot-sizes,--print_instructions_sizes_to=build/aot.json" 

2. 使用dart命令將上一步生成的aot.json文件轉化成結構可視化的網(wǎng)頁

   dart ./bin/run_binary_size_analysis.dartbuild/aot.json path_to_webpage_dir 

   run_binary_size_analysis.dart是dart提供的一個分析工具，在flutter引擎源碼中路徑如下:

image

3. 打開生成文件夾中的index.html即可分析具體業(yè)務所占用的大小，右上角的Large Symbols和Large Files按鈕可以直接定位體積占比從大到小的方法/文件。

   image

image

舉個例子，上面的分析顯示PItemInfoInternal.fromJson方法占用了大量體積，跟蹤發(fā)現(xiàn)這個方法主要的操作是將Map數(shù)據(jù)轉化成對象

PItemInfoInternal.fromJson(Map<dynamic, dynamic> map) { id = map['id'] as String; attributes = map['attributes'] as String; title = map['title'] as String; ...... } 

由此我們可以推斷這種類型轉換的操作會導致編譯生成一些體積很大的代碼。

優(yōu)化措施

1. 減少顯示類型轉換操作

   按照上述分析發(fā)現(xiàn)顯示的類型轉換 as String/Bool/Int 這類操作會導致App.framework體積顯著增加，主要是它會增加類型檢查以及拋出異常的處理邏輯:

   if (x.classId < A && x.classId > B) throw "x is not subtype of String"; 

   通過提取靜態(tài)公用方法的方式可以成功減少400k+體積。

2. 通過編譯參數(shù) --dwarf_stack_trace和--obfuscate減小生成代碼的體積

dwarf_stack_trace表示在生成的動態(tài)庫文件中，不使用堆棧跟蹤符號

obfuscate表示混淆，通過減少變量名/方法名的方式減小代碼體積

//編譯release包并打印size flutter build aot --release --extra-gen-snapshot-options=--print-snapshot-sizes //--dwarf_stack_traces， -->減少6.2%大小 flutter build aot --release --extra-gen-snapshot-options="--dwarf_stack_traces,--print-snapshot-sizes" //--obsfuscation， -->減少2.5%大小 flutter build aot --release --extra-gen-snapshot-options="--dwarf_stack_traces,--print-snapshot-sizes,--obfuscate"http://總大小減少8.7%

3. 通過修改ios打包腳本xcode_backend.sh，刪除dSYM符號表信息文件，App.framework成功減小20%的大小。dSYM 是保存 16 進制函數(shù)地址映射信息的中轉文件，包含我們調(diào)試的 symbols，用來分析 crash report 文件，解析出正確的錯誤函數(shù)信息。

   使用xcrun命令將dSYM從framework中剝離出來，可以大大減小App.framework的體積。

RunCommand xcrun dsymutil -o "${build_dir}/aot/App.dSYM" "${app_framework}/App" RunCommand xcrun strip -x -S "${derived_dir}/App.framework/App" 

4. 減少flutter和native資源重復造成的體積增大

   利用橋接的方式，flutter直接使用Platform端資源文件，避免因為資源文件重復導致的包大小增加問題。

   主要方式是通過BasicMessageChannel在Flutter和Platform端傳遞信息。Flutter端將資源名AssetName傳遞給Platform端，Platform端接收到AssetName后，根據(jù)name定位到資源文件，并將該文件以二進制數(shù)據(jù)格式，通過BasicMessageChannel傳遞回Flutter端。

image

總結

引入Flutter帶來的安裝包體積問題會給很多技術團隊帶來困擾。通過以上措施，F(xiàn)lutter產(chǎn)物App.framework的大小減少30%+，閑魚技術團隊后續(xù)也會考慮采取下載并懶加載等方式減少資源占用的體積；繼續(xù)代碼生成中的各種對比，排查避免較大產(chǎn)物的寫法，同時也會和Google一起進一步尋找優(yōu)化空間。

閑魚期待你的加入

歡迎加入閑魚，一起探索Flutter更多可能。
簡歷投遞：guicai.gxy@alibaba-inc.com

參考

• https://github.com/flutter/flutter
• https://github.com/flutter/engine
• https://github.com/flutter/flutter/issues/21813
• https://github.com/flutter/flutter/issues/20671

本頁內(nèi)容由塔燈網(wǎng)絡科技有限公司通過網(wǎng)絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權內(nèi)容。本文鏈接:http://www.juherenli.com/18384.html