作者：閑魚(yú)技術(shù)-三蒞

背景

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

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

ios工程對(duì)Flutter有如下依賴(lài)：

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

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

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

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

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

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

結(jié)果如下：

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編譯后生成的二進(jìn)制代碼大小

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

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

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

1. 執(zhí)行如下命令編譯出一個(gè)arm64架構(gòu)的App.framework,并將它的包組成結(jié)構(gòu)放到指定目錄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文件轉(zhuǎn)化成結(jié)構(gòu)可視化的網(wǎng)頁(yè)

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

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

image

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

   image

image

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

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

由此我們可以推斷這種類(lèi)型轉(zhuǎn)換的操作會(huì)導(dǎo)致編譯生成一些體積很大的代碼。

優(yōu)化措施

1. 減少顯示類(lèi)型轉(zhuǎn)換操作

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

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

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

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

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

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

//編譯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. 通過(guò)修改ios打包腳本xcode_backend.sh，刪除dSYM符號(hào)表信息文件，App.framework成功減小20%的大小。dSYM 是保存 16 進(jìn)制函數(shù)地址映射信息的中轉(zhuǎn)文件，包含我們調(diào)試的 symbols，用來(lái)分析 crash report 文件，解析出正確的錯(cuò)誤函數(shù)信息。

   使用xcrun命令將dSYM從framework中剝離出來(lái)，可以大大減小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資源重復(fù)造成的體積增大

   利用橋接的方式，flutter直接使用Platform端資源文件，避免因?yàn)橘Y源文件重復(fù)導(dǎo)致的包大小增加問(wèn)題。

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

image

總結(jié)

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

閑魚(yú)期待你的加入

歡迎加入閑魚(yú)，一起探索Flutter更多可能。
簡(jiǎn)歷投遞：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

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