Skip to main content

使用应用大小工具

它是什么?

#

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

什么是“大小信息”?

#

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

Dart 大小信息

#

Dart AOT 编译器在编译应用程序时(仅限概要文件或发布模式——AOT 编译器不用于 JIT 编译的调试版本)会对您的代码执行树形抖动。这意味着编译器会尝试通过删除未使用的或不可访问的代码部分来优化您的应用程序大小。

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

如何使用它

#

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

应用大小选项卡的屏幕截图

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

应用大小在登录页面上的访问屏幕截图

分析选项卡

#

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

应用大小分析的屏幕截图

加载大小文件

#

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

应用大小分析加载屏幕的屏幕截图

有关生成大小文件的详细信息,请参见下面的生成大小文件

树状图和表格

#

树状图和表格显示应用程序大小的层次数据。

使用树状图

#

树状图是用于层次数据的可视化工具。空间被分解成矩形,每个矩形的大小和顺序由某个定量变量(在本例中为以字节为单位的大小)决定。每个矩形的面积与该节点在已编译应用程序中占用的大小成比例。在每个矩形(称为 A)内,存在数据层次结构中更深一层(A 的子节点)的其他矩形。

要深入了解树状图中的单元格,请选择该单元格。这将重新设置树的根,以便所选单元格成为树状图的视觉根。

要返回或上移一层,请使用树状图顶部的面包屑导航器。

树状图面包屑导航器的屏幕截图

支配树和调用图

#

此页面部分显示代码大小归属数据(例如,为什么代码片段包含在已编译的应用程序中)。此数据以支配树和调用图的形式显示。

使用支配树

#

支配树是一棵树,其中每个节点的子节点都是其直接支配的节点。如果到达节点 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

此信息有助于了解为什么某些代码片段存在于已编译的应用程序中。例如,如果您正在分析应用程序大小并发现已编译的应用程序中包含意外的包,则可以使用支配树将包追溯到其根源。

代码大小支配树的屏幕截图

使用调用图

#

调用图提供与支配树类似的信息,有助于您了解为什么代码存在于已编译的应用程序中。但是,调用图不显示代码大小数据的节点之间的一对多支配关系(如支配树),而是显示代码大小数据节点之间多对多的关系。

同样,使用以下示例:

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 -->

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

代码大小调用图的屏幕截图

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

#

如果您想了解将代码片段包含在应用程序中的 根本原因 ,请使用支配树。如果您想了解到代码片段的所有调用路径以及从代码片段的所有调用路径,请使用调用图。

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

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

差异选项卡

#

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

应用大小差异的屏幕截图

加载大小文件

#

打开 差异 选项卡时,您会看到加载“旧”和“新”大小文件的说明。同样,这些文件需要从同一应用程序生成。将这些文件拖放到各自的对话框中,然后单击 分析差异

应用大小差异加载屏幕的屏幕截图

有关生成这些文件的详细信息,请参见下面的生成大小文件

树状图和表格

#

在差异视图中,树状图和树形表格仅显示两个导入大小文件之间不同的数据。

有关使用树状图的问题,请参见上面的使用树状图

生成大小文件

#

要使用应用大小工具,您需要生成 Flutter 大小分析文件。此文件包含整个应用程序的大小信息(原生代码、Dart 代码、资源、字体等),您可以使用 --analyze-size 标志生成它:

flutter build <你的目标平台> --analyze-size

这将构建您的应用程序,将大小摘要打印到命令行,并打印一行,告诉您在哪里可以找到大小分析文件。

flutter build apk --analyze-size --target-platform=android-arm64
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
app-release.apk (总压缩)                               6 MB
...
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
您的 APK 分析摘要位于:build/apk-code-size-analysis_01.json

在此示例中,将 build/apk-code-size-analysis_01.json 文件导入应用大小工具以进行进一步分析。有关更多信息,请参见应用大小文档

其他资源

#

要了解如何使用 DevTools 对 Wonderous 应用执行逐步大小分析,请查看应用大小工具教程。还讨论了减小应用大小的各种策略。