使用應用體積工具

這是什麼?

應用程式體積工具可讓您分析應用的總體積。您可以使用 Analysis 標籤 來檢視「體積資訊」的單個快照,或使用 Diff 標籤 比較使用「體積資訊」的兩個不同快照。

什麼是“體積資訊”?

「體積資訊」包含 Dart 程式碼、原生程式碼和非程式碼部分(比如應用套件,資源和字型)。一個「體積資訊」檔案包含您應用的所有圖片資料。

Dart 體積資訊

Dart AOT 編譯器會在編譯應用程式時對程式碼進行搖樹最佳化(僅限 profile 或 release 模式 - AOT 編譯器不用於 debug 產生,debug 模式是 JIT 編譯的)。這意味著,編譯器會嘗試刪除未使用或無法存取的程式碼,對應用體積進行最佳化。

當編譯器盡全力最佳化您的程式碼後,產出的二進位制檔案會包含依賴、庫、類和函式的集合,以及他們的體積(以位元組為單位)。這是我們可以在應用體積工具中分析的 Dart 部分的「體積資訊」, 有了這些資訊,我們便可以進一步最佳化 Dart 程式碼,並且追蹤體積問題。

如何使用

如果 DevTools 已經連線到了一個正在執行的應用,點選 “App Size” 標籤。

Screenshot of app size tab

如果 DevTools 未連線到應用,您可以從啟動 DevTools 後出現的登入頁存取該工具(檢視安裝說明)。

Screenshot of app size access on landing page

分析標籤頁

「分析」標籤頁允許您檢查體積資訊的單個快照。您可以看到層次結構的樹狀圖和表格,並且可以使用 “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

支配樹和呼叫圖

這個部分顯示了程式碼的體積屬性資訊(例如:為什麼編譯後的應用程式中包含一段程式碼)。這些資料以支配樹和呼叫圖的形式呈現。

使用支配樹

支配樹 是一個樹形結構的圖表,其子節點可以立刻被支配。如果通往 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

使用呼叫圖

呼叫圖提供了與支配樹相似的資訊,幫助您理解編譯後的應用程式中為何出現某些程式碼片段。它並不像支配樹一樣提供了一對多的程式碼體積資料節點,而是展示了程式碼體積資料的節點之間存在的多對多關係。

我們再來看下面這個例子:

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

此資料的呼叫圖會將直接呼叫者 package:bpackage:cpackage:d 連結到一起,而不是它的「支配者」 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 檔案到體積分析工具。更多資訊,可以檢視 應用體積尺寸文件