使用應用體積工具

這是什麼?

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

什麼是『體積訊息』？

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

Dart 體積訊息

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

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

如何使用

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

如果 DevTools 未連線到應用，你可以從啟動 DevTools 後出現的登入頁訪問該工具（檢視安裝說明）。

分析標籤頁

「分析」標籤頁允許你檢查體積訊息的單個快照。你可以看到層次結構的樹狀圖和表格，並且可以使用 “dominator tree” 和 “call graph” 看到程式碼的屬性資料（例如：為什麼編譯後的應用程式中包含一段程式碼）。

讀取一個體積檔案

當你開啟分析標籤頁時，你可以看到載入一個體積檔案的使用說明。拖動一個尺寸檔案到彈框中，並點選 “Analyze Size”。

檢視 生成體積檔案 可以得到有關生成尺寸檔案的訊息。

樹狀圖和表格

樹狀圖和表格可以檢視你的應用體積的結構化資料。

使用樹狀圖

樹狀圖是資料結構的視覺化表示。在檢視中，空間被分解成矩形，其中每個矩形的體積和順序由一些定量變數決定 (在本例中，體積以位元組為單位)。每個矩形的面積與節點在編譯後的應用程式中所佔的大小成比例關係。在每個矩形（稱為 A）的內部，還有更多的矩形存在於資料層次結構的更深層（A 的子級）。

要檢視樹狀圖中的單元格的詳情，請選擇這個單元格。這將重新確定樹的根節點，以便選中的單元格作為樹狀圖中新的根節點。

如果要後退或向上導向，請使用樹對映頂部的麵包屑導向。

支配樹和呼叫圖

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

使用支配樹

支配樹 是一個樹形結構的圖表，其子節點可以立刻被支配。如果通往 b 的每條路徑都必經節點 a，那麼我們可以說：節點 a 支配了節點 b。

把它放在應用程式大小分析的上下文中，想象一下 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：b 和 package：c 與 package：d 連結到一起，而不是它的「支配者」 package：a。

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

這些訊息對於理解程式碼片段（套件、函式庫、類別和函式）之間的細粒度依賴關係非常有用。

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

如果你想理解應用程式中包含一段程式碼的 根本 原因，請使用支配樹。如果你想理解一段程式碼之間的所有呼叫路徑，請使用呼叫圖。

支配樹是呼叫圖資料的分析或切片，其中節點是透過「支配」而不是父子層次結構連線。在父節點支配子節點的情況下，呼叫圖和支配樹中的關係是相同的，但情況並非總是如此。

在呼叫圖完成的情況下（每對節點之間存在一條邊），支配樹將顯示出 root 是圖中每個節點的支配者。呼叫圖可以讓你更好地理解為什麼在應用程式中包含一段程式碼。

差異標籤頁

diff 標籤頁讓你可以比較體積訊息的兩個快照。你要比較的兩個體積訊息檔案應該從同一個應用程式的兩個不同版本生成，例如，在更改程式碼之前和之後生成的體積檔案。你可以使用樹狀圖和表格視覺化兩個資料集之間的差異。

讀取體積檔案

當你開啟 Diff 標籤頁時，你將看到載入「舊」和「新」大小檔案的使用說明。同樣，這些檔案需要從同一個應用程式生成。將這些檔案拖放到各自的對話框中，然後單擊 Analyze Diff。

檢視 生成體積檔案 可以得到有關生成這些檔案的訊息。

樹狀圖和表格

在差異檢視中, 這個樹狀圖和表格只會顯示匯入的兩個檔案中的差異資料。

關於樹狀圖的問題，可以檢視使用樹狀圖。

生成尺寸檔案

要使用應用體積工具，你需要生成一個 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 檔案到體積分析工具。更多訊息，可以檢視 應用體積尺寸文件。

其他資源

若你想要瞭解對應用（例如 Wonderous）進行封裝大小分析的詳細步驟，可以閱讀 應用體積工具介紹。教程內也討論了多種減少封裝大小的方法。