使用應用大小工具
它是什麼?
#應用大小工具可讓您分析應用的總體大小。您可以使用 Analysis tab 檢視“大小資訊”的單個快照,或使用 Diff tab 比較“大小資訊”的兩個不同快照。
什麼是“大小資訊”?
#“大小資訊”包含 Dart 程式碼、原生程式碼以及應用非程式碼元素(如應用包、資源和字型)的大小資料。“大小資訊”檔案包含應用整體大小的完整資料。
Dart 大小資訊
#Dart AOT 編譯器在編譯應用程式時(僅限 profile 或 release 模式 — AOT 編譯器不用於 debug 構建,debug 構建使用 JIT 編譯)會對程式碼執行 tree-shaking。這意味著編譯器會嘗試透過刪除未使用的或無法訪問的程式碼來最佳化應用大小。
在編譯器儘可能最佳化程式碼後,最終結果可以總結為二進位制輸出中存在的包、庫、類和函式的集合,以及它們的大小(位元組)。這就是應用大小工具中可供分析的“大小資訊”的 Dart 部分,以便進一步最佳化 Dart 程式碼並追蹤大小問題。
如何使用
#如果 DevTools 已連線到正在執行的應用程式,請導航到“App Size”選項卡。

如果 DevTools 未連線到正在執行的應用程式,您可以從啟動 DevTools 後出現的歡迎頁面訪問該工具(請參閱 啟動說明)。

分析(Analysis)選項卡
#Analysis tab 允許您檢查大小資訊的單個快照。您可以使用樹狀圖和表格檢視大小資料的層次結構,還可以使用支配樹和呼叫圖檢視程式碼歸因資料(例如,為什麼程式碼的一部分包含在已編譯的應用程式中)。

載入大小檔案
#開啟 Analysis tab 後,您會看到載入應用大小檔案的說明。將應用大小檔案拖放到對話方塊中,然後點選“Analyze Size”。

有關生成大小檔案的資訊,請參閱下面的 Generating size files。
樹狀圖和表格
#樹狀圖和表格顯示應用大小的層次化資料。
使用樹狀圖
#樹狀圖是用於視覺化層次化資料的圖表。空間被劃分為矩形,每個矩形的大小和排序由某個量化變數(在本例中為位元組大小)決定。每個矩形的面積與其在已編譯應用程式中佔用的節點大小成正比。在每個矩形(稱為 A)內部,存在更深一層資料(A 的子節點)的附加矩形。
要鑽取樹狀圖中的一個單元格,請選擇該單元格。這將重新定位樹,使選定的單元格成為樹狀圖的視覺根。
要返回或向上導航一級,請使用樹狀圖頂部的麵包屑導航器。

支配樹和呼叫圖
#頁面此部分顯示了程式碼大小歸因資料(例如,為什麼程式碼的一部分包含在已編譯的應用程式中)。這些資料以支配樹和呼叫圖的形式顯示。
使用支配樹
#支配樹 是一種樹,其中每個節點的子節點是該節點直接支配的節點。節點 a 被稱為“支配”節點 b,如果所有到達 b 的路徑都必須經過 a。
在應用大小分析的上下文中,可以想象 package:a 同時匯入 package:b 和 package:c,並且 package:b 和 package:c 都匯入 package:d。
package:a
|__ package:b
| |__ package:d
|__ package:c
|__ package:d在此示例中,package:a 支配 package:d,因此此資料的支配樹將如下所示:
package:a
|__ package:b
|__ package:c
|__ package:d此資訊有助於理解為什麼某些程式碼會包含在已編譯的應用程式中。例如,如果您正在分析應用大小並發現意外的包包含在已編譯的應用中,您可以使用支配樹將該包追溯到其根源。

使用呼叫圖
#呼叫圖在幫助您理解程式碼為何存在於已編譯的應用程式中方面,提供了與支配樹類似的資訊。但是,呼叫圖不顯示程式碼大小資料節點之間的一對多支配關係(如支配樹所示),而是顯示程式碼大小資料節點之間存在的多對多關係。
再次使用以下示例:
package:a
|__ package:b
| |__ package:d
|__ package:c
|__ package:d此資料的呼叫圖會將 package:d 連結到其直接呼叫者 package:b 和 package:c,而不是其“支配者”package:a。
package:a --> package:b -->
package:d
package:a --> package:c -->此資訊對於理解程式碼片段(包、庫、類、函式)之間細粒度的依賴關係非常有用。

我應該使用支配樹還是呼叫圖?
#如果您想了解程式碼包含在應用程式中的“根”原因,請使用支配樹。如果您想了解程式碼片段的所有呼叫路徑(輸入和輸出),請使用呼叫圖。
支配樹是對呼叫圖資料的分析或切片,其中節點透過“支配”而不是父子層次結構連線。在父節點支配子節點的情況下,呼叫圖和支配樹中的關係將是相同的,但這並不總是如此。
在呼叫圖是完整的場景中(圖中每對節點之間都存在邊),支配樹將顯示 root 是圖中所有節點的支配者。這是一個呼叫圖可以更好地幫助您理解程式碼為何包含在應用程式中的示例。
差異(Diff)選項卡
#Diff tab 允許您比較兩個大小資訊的快照。您正在比較的兩個大小資訊檔案應從同一應用的兩個不同版本生成;例如,在程式碼更改之前和之後生成的大小檔案。您可以使用樹狀圖和表格視覺化這兩個資料集之間的差異。

載入大小檔案
#開啟 **Diff** tab 後,您將看到載入“舊”和“新”大小檔案的說明。同樣,這些檔案需要從同一個應用程式生成。將這些檔案拖放到各自的對話方塊中,然後點選 **Analyze Diff**。

有關生成這些檔案的資訊,請參閱下面的 Generating size files。
樹狀圖和表格
#在 diff 檢視中,樹狀圖和樹表僅顯示兩個已匯入大小檔案之間有差異的資料。
有關使用樹狀圖的問題,請參閱上面的 Use the treemap。
生成大小檔案
#要使用應用大小工具,您需要生成一個 Flutter 大小分析檔案。該檔案包含您整個應用程式的大小資訊(原生程式碼、Dart 程式碼、資源、字型等),您可以使用 --analyze-size 標誌生成它。
flutter build <your target platform> --analyze-size這會構建您的應用程式,在命令列中列印大小摘要,並列印一條說明您可以在哪裡找到大小分析檔案的訊息。
flutter build apk --analyze-size --target-platform=android-arm64
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
app-release.apk (total compressed) 6 MB
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
A summary of your APK analysis can be found at: build/apk-code-size-analysis_01.json在此示例中,將 build/apk-code-size-analysis_01.json 檔案匯入應用大小工具以進行進一步分析。有關更多資訊,請參閱 App Size Documentation。
其他資源
#要了解如何使用 DevTools 對 Wonderous App 進行分步大小分析,請檢視 App Size Tool 教程。教程中還討論了各種減少應用大小的策略。