跳到主內容

使用應用大小工具

瞭解如何使用 DevTools 的應用大小工具。

它是什麼?

#

應用大小工具允許您分析應用的總大小。您可以使用“分析”標籤頁檢視單次“大小資訊”快照,或者使用“差異”標籤頁比較兩份不同的“大小資訊”快照。

什麼是“大小資訊”?

#

“大小資訊”包含 Dart 程式碼、原生程式碼以及應用中非程式碼元素(如應用程式包、資原始檔和字型)的大小資料。“大小資訊”檔案包含了構成您應用程式總大小的完整概覽。

Dart 大小資訊

#

Dart AOT 編譯器在編譯您的應用程式時會執行程式碼樹搖(tree-shaking)(僅限 profile 或 release 模式——debug 版本使用 JIT 編譯,不涉及 AOT 編譯器)。這意味著編譯器會透過移除未被使用或無法訪問的程式碼片段來最佳化應用的大小。

在編譯器盡力最佳化程式碼後,最終結果可以概括為二進位制輸出中存在的包、庫、類和函式的集合,以及它們以位元組為單位的大小。這是我們可以在應用大小工具中分析的“大小資訊”的 Dart 部分,從而進一步最佳化 Dart 程式碼並定位大小相關的問題。

如何使用

#

如果 DevTools 已連線到正在執行的應用程式,請導航至“App Size”(應用大小)標籤頁。

Screenshot of app size tab

如果 DevTools 未連線到執行中的應用程式,您可以從啟動 DevTools 後顯示的著陸頁訪問該工具(請參閱啟動說明)。

Screenshot of app size access on landing page

分析 (Analysis) 標籤頁

#

“分析”標籤頁允許您檢查單個大小資訊快照。您可以使用樹狀圖和表格檢視大小資料的層級結構,並可以使用支配樹 (dominator tree) 和呼叫圖 (call graph) 檢視程式碼歸屬資料(例如,為什麼某段程式碼被包含在編譯後的應用程式中)。

Screenshot of app size analysis

載入大小檔案

#

開啟“分析”標籤頁時,您會看到載入應用大小檔案的說明。將應用大小檔案拖放到對話方塊中,然後點選“Analyze Size”(分析大小)。

Screenshot of app size analysis loading screen

有關生成大小檔案的資訊,請參閱下文的生成大小檔案

樹狀圖與表格

#

樹狀圖和表格顯示了您應用大小的層級資料。

使用樹狀圖

#

樹狀圖是一種視覺化層級資料的方法。空間被劃分為矩形,每個矩形的大小和順序由某個定量變數(在本例中為位元組大小)決定。每個矩形的面積與該節點在編譯後的應用程式中所佔的大小成正比。在每個矩形(稱為 A)內部,存在更深一層資料層級(A 的子節點)的附加矩形。

要深入檢視樹狀圖中的單元格,請選中該單元格。這將重置樹的根節點,使選中的單元格成為樹狀圖的視覺根節點。

要返回或向上移動一級,請使用樹狀圖頂部的麵包屑導航。

Screenshot of treemap breadcrumb navigator

支配樹與呼叫圖

#

頁面的這一部分顯示了程式碼大小歸屬資料(例如,為什麼某段程式碼被包含在編譯後的應用程式中)。這些資料以支配樹和呼叫圖的形式呈現。

使用支配樹

#

支配樹 (Dominator tree) 是一種樹結構,其中每個節點的子節點都是該節點直接支配的節點。如果到達節點 b 的每一條路徑都必須經過節點 a,則稱節點 a “支配”節點 b

在應用大小分析的語境下,想象 package:a 同時匯入了 package:bpackage:c,而 package:bpackage: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

此資訊有助於理解為什麼某些程式碼片段會存在於您的編譯應用程式中。例如,如果您在分析應用大小時發現編譯後的應用中包含了意料之外的包,您可以使用支配樹將該包追溯到其根源。

Screenshot of code size dominator tree

使用呼叫圖

#

呼叫圖 (Call graph) 在幫助您理解程式碼為何存在於編譯後的應用程式中時,提供了與支配樹類似的資訊。然而,呼叫圖顯示的不是支配樹中那種節點之間一對多的支配關係,而是顯示程式碼大小資料節點之間存在的多對多關係。

再次使用以下示例:

package:a
|__ package:b
|   |__ package:d
|__ package:c
    |__ package:d

該資料的呼叫圖會將 package:d 連結到其直接呼叫者 package:bpackage:c,而不是其“支配者” package:a

package:a --> package:b -->
                              package:d
package:a --> package:c -->

此資訊對於理解程式碼片段(包、庫、類、函式)之間細粒度的依賴關係非常有用。

Screenshot of code size call graph

我應該使用支配樹還是呼叫圖?

#

如果您想了解程式碼被包含在應用程式中的根本原因,請使用支配樹。如果您想了解指向某段程式碼以及從該程式碼發出的所有呼叫路徑,請使用呼叫圖。

支配樹是呼叫圖資料的一種分析或切片,節點之間透過“支配”關係而非父子層級關係連線。在父節點支配子節點的情況下,呼叫圖和支配樹中的關係是相同的,但這並非總是如此。

在呼叫圖完整(每對節點之間都存在邊)的情況下,支配樹將顯示 root 是圖中每個節點的支配者。這便是一個呼叫圖能讓您更好地理解某段程式碼為何被包含在應用程式中的例子。

差異 (Diff) 標籤頁

#

“差異”標籤頁允許您比較兩份大小資訊快照。您比較的兩份大小資訊檔案應來自同一應用的不同版本;例如,程式碼變更前和變更後生成的大小檔案。您可以使用樹狀圖和表格直觀地看到兩組資料之間的差異。

Screenshot of app size diff

載入大小檔案

#

開啟“差異” (Diff) 標籤頁時,您會看到載入“舊”和“新”大小檔案的說明。再次強調,這些檔案需要來自同一個應用程式。將這些檔案拖放到各自的對話方塊中,並點選“分析差異” (Analyze Diff)

Screenshot of app size diff loading screen

有關生成這些檔案的資訊,請參閱下文的生成大小檔案

樹狀圖與表格

#

在差異檢視中,樹狀圖和樹狀表格僅顯示兩個匯入的大小檔案之間存在差異的資料。

關於使用樹狀圖的問題,請參閱上文的使用樹狀圖

生成大小檔案

#

要使用應用大小工具,您需要生成一個 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 檔案匯入應用大小工具以進行進一步分析。有關更多資訊,請參閱應用大小文件

其他資源

#

要了解如何使用 DevTools 對 Wonderous 應用進行分步大小分析,請檢視應用大小工具教程。其中還討論了各種減少應用大小的策略。