跳至主要内容

使用应用大小工具

它是什么?

#

应用大小工具允许你分析应用的总大小。你可以使用分析选项卡查看“大小信息”的单个快照,或使用差异选项卡比较“大小信息”的两个不同快照。

什么是“大小信息”?

#

“大小信息”包含应用的 Dart 代码、原生代码和非代码元素(如应用程序包、资产和字体)的大小数据。“大小信息”文件包含应用大小的整体数据。

Dart 大小信息

#

当编译应用程序时(仅限 profile 或 release 模式 - 调试构建不使用 AOT 编译器,而是使用 JIT 编译),Dart AOT 编译器会对你的代码进行树形抖动。这意味着编译器会尝试通过移除未使用的或无法访问的代码来优化应用的大小。

在编译器尽可能地优化代码之后,最终结果可以总结为二进制输出中存在的包、库、类和函数的集合,以及它们的大小(以字节为单位)。这是我们在应用大小工具中可以分析的“大小信息”的 Dart 部分,以便进一步优化 Dart 代码并追踪大小问题。

如何使用它

#

如果 DevTools 已经连接到正在运行的应用程序,请导航到“应用大小”选项卡。

Screenshot of app size tab

如果 DevTools 未连接到正在运行的应用程序,则可以在启动 DevTools 后出现的登录页面访问该工具(请参阅启动说明)。

Screenshot of app size access on landing page

分析选项卡

#

分析选项卡允许你检查大小信息的单个快照。你可以使用树状图和表格查看大小数据的层次结构,还可以使用支配树和调用图查看代码归属数据(例如,为什么代码包含在已编译的应用程序中)。

Screenshot of app size analysis

加载大小文件

#

打开分析选项卡时,你会看到加载应用大小文件的说明。将应用大小文件拖放到对话框中,然后点击“分析大小”。

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:d与其直接调用者package:bpackage:c链接起来,而不是与其“支配者”package:a链接起来。

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

此信息可用于了解代码片段(包、库、类、函数)之间的细粒度依赖关系。

Screenshot of code size call graph

我应该使用支配树还是调用图?

#

如果你想了解代码包含在应用程序中的根本原因,请使用支配树。如果你想了解代码的所有调用路径,请使用调用图。

支配树是对调用图数据的分析或切片,其中节点通过“支配”而不是父子关系连接。在父节点支配子节点的情况下,调用图和支配树中的关系将相同,但并非总是如此。

在调用图完整(每对节点之间都存在边)的情况下,支配树将显示root是图中每个节点的支配者。这是一个调用图将让你更好地了解为什么代码包含在应用程序中的示例。

差异选项卡

#

差异选项卡允许你比较大小信息的两个快照。你正在比较的两个大小信息文件应从同一应用程序的两个不同版本生成;例如,在更改代码之前和之后生成的大小文件。你可以使用树状图和表格来可视化两个数据集之间的差异。

Screenshot of app size 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 应用进行分步大小分析,请查看应用大小工具教程。教程中还讨论了减少应用大小的各种策略。