跳到主内容

使用应用尺寸工具

了解如何使用 DevTools 应用尺寸工具。

它是什么?

#

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

什么是“尺寸信息”?

#

“尺寸信息”包含 Dart 代码、原生代码以及应用程序的非代码元素的尺寸数据,例如应用程序包、资源和字体。 “尺寸信息”文件包含应用程序尺寸的完整数据的快照。

Dart 尺寸信息

#

Dart AOT 编译器在编译应用程序时(仅限 profile 或 release 模式——AOT 编译器不用于 debug 构建,debug 构建使用 JIT 编译)执行 tree-shaking。这意味着编译器尝试通过删除未使用的或无法访问的代码片段来优化应用程序的尺寸。

在编译器尽可能优化代码后,最终结果可以概括为存在于二进制输出中的包、库、类和函数集合,以及它们的大小(以字节为单位)。这就是我们可以在应用尺寸工具中分析的 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 应用尺寸工具逐步执行 Wondrous App 的尺寸分析,请查看 应用尺寸工具教程。还讨论了减少应用程序尺寸的各种策略。