Usar la herramienta app size

La herramienta app size te permite analizar el tamaño total de tu app. Puedes ver una captura individual de la "información de tamaño" usando la pestaña Analysis, o comparar dos capturas diferentes de "información de tamaño" usando la pestaña Diff.

La "información de tamaño" contiene datos de tamaño para el código Dart, código nativo y elementos que no son código de tu app, como el paquete de la aplicación, assets y fuentes. Un archivo de "información de tamaño" contiene datos para la imagen total del tamaño de tu aplicación.

El compilador Dart AOT realiza tree-shaking en tu código al compilar tu aplicación (solo en modo profile o release; el compilador AOT no se usa para builds de debug, los cuales son compilados en JIT). Esto significa que el compilador intenta optimizar el tamaño de tu app eliminando partes de código que no se usan o son inalcanzables.

Después de que el compilador optimiza tu código todo lo que puede, el resultado final se puede resumir como la colección de paquetes, librerías, clases y funciones que existen en la salida binaria, junto con su tamaño en bytes. Esta es la porción de Dart de la "información de tamaño" que podemos analizar en la herramienta app size para optimizar aún más el código Dart y rastrear problemas de tamaño.

Si DevTools ya está conectado a una aplicación en ejecución, navega a la pestaña "App Size".

Si DevTools no está conectado a una aplicación en ejecución, puedes acceder a la herramienta desde la página de inicio que aparece una vez que hayas iniciado DevTools (consulta las instrucciones de inicio).

La pestaña de análisis te permite inspeccionar una sola captura de información de tamaño. Puedes ver la estructura jerárquica de los datos de tamaño usando el treemap y la tabla, y puedes ver los datos de atribución de código (por ejemplo, por qué se incluye una pieza de código en tu aplicación compilada) usando el árbol dominador y el gráfico de llamadas (call graph).

Cuando abres la pestaña Analysis, verás instrucciones para cargar un archivo de tamaño de app. Arrastra y suelta un archivo de tamaño de app en el diálogo y haz clic en "Analyze Size".

Consulta Generar archivos de tamaño a continuación para obtener información sobre la generación de archivos de tamaño.

El treemap y la tabla muestran los datos jerárquicos del tamaño de tu app.

Un treemap es una visualización de datos jerárquicos. El espacio se divide en rectángulos, donde cada rectángulo se dimensiona y ordena según alguna variable cuantitativa (en este caso, el tamaño en bytes). El área de cada rectángulo es proporcional al tamaño que ocupa el nodo en la aplicación compilada. Dentro de cada rectángulo (llamemos a uno A), existen rectángulos adicionales que se encuentran un nivel más profundo en la jerarquía de datos (hijos de A).

Para profundizar en una celda en el treemap, selecciona la celda. Esto reorienta la raíz del árbol de modo que la celda seleccionada se convierte en la raíz visual del treemap.

Para volver atrás, o subir un nivel, usa el navegador de migas de pan (breadcrumb) en la parte superior del treemap.

Esta sección de la página muestra datos de atribución del tamaño del código (por ejemplo, por qué una pieza de código se incluye en tu aplicación compilada). Estos datos son visibles en forma de árbol dominador así como de gráfico de llamadas (call graph).

Un árbol dominador es un árbol donde los hijos de cada nodo son aquellos nodos a los que domina inmediatamente. Se dice que un nodo a "domina" a un nodo b si cada ruta hacia b debe pasar por a.

Para ponerlo en el contexto del análisis del tamaño de la app, imagina que package:a importa tanto a package:b como a package:c, y tanto package:b como package:c importan a package:d.

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

En este ejemplo, package:a domina a package:d, por lo que el árbol dominador para estos datos se vería así:

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

Esta información es útil para entender por qué ciertas piezas de código están presentes en tu aplicación compilada. Por ejemplo, si estás analizando el tamaño de tu app y encuentras un paquete inesperado incluido en tu app compilada, puedes usar el árbol dominador para rastrear el paquete hasta su fuente raíz.

Un gráfico de llamadas (call graph) proporciona información similar al árbol dominador con respecto a ayudarte a entender por qué existe código en una aplicación compilada. Sin embargo, en lugar de mostrar las relaciones dominantes de uno a muchos entre nodos de datos de tamaño de código como el árbol dominador, el gráfico de llamadas muestra las relaciones de muchos a muchos que existen entre nodos de datos de tamaño de código.

De nuevo, usando el siguiente ejemplo:

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

El gráfico de llamadas para estos datos vincularía package:d a sus llamadores directos, package:b y package:c, en lugar de a su "dominador", package:a.

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

Esta información es útil para entender las dependencias detalladas entre las piezas de tu código (paquetes, librerías, clases, funciones).

Usa el árbol dominador si quieres entender la causa raíz por la cual una pieza de código está incluida en tu aplicación. Usa el gráfico de llamadas (call graph) si quieres entender todas las rutas de llamada hacia y desde una pieza de código.

Un árbol dominador es un análisis o fragmento de datos de un gráfico de llamadas (call graph), donde los nodos están conectados por "dominancia" en lugar de una jerarquía padre-hijo. En el caso de que un nodo padre domine a un hijo, la relación en el gráfico de llamadas y en el árbol dominador sería idéntica, pero este no es siempre el caso.

En el escenario donde el gráfico de llamadas (call graph) está completo (existe una arista entre cada par de nodos), el árbol dominador mostraría que la raíz es el dominador de cada nodo en el gráfico. Este es un ejemplo donde el gráfico de llamadas te daría un mejor entendimiento sobre por qué una pieza de código está incluida en tu aplicación.

La pestaña diff te permite comparar dos capturas de información de tamaño. Los dos archivos de información de tamaño que estés comparando deben generarse a partir de dos versiones diferentes de la misma app; por ejemplo, el archivo de tamaño generado antes y después de los cambios en tu código. Puedes visualizar la diferencia entre los dos conjuntos de datos usando el treemap y la tabla.

Cuando abres la pestaña Diff, verás instrucciones para cargar archivos de tamaño "antiguos" y "nuevos". Nuevamente, estos archivos deben ser generados a partir de la misma aplicación. Arrastra y suelta estos archivos en sus respectivos diálogos y haz clic en Analyze Diff.

Consulta Generar archivos de tamaño a continuación para obtener información sobre cómo generar estos archivos.

En la vista diff, el treemap y la tabla en árbol muestran solo datos que difieren entre los dos archivos de tamaño importados.

Para preguntas sobre cómo usar el treemap, consulta Usar el treemap más arriba.

Para usar la herramienta app size, necesitarás generar un archivo de análisis de tamaño de Flutter. Este archivo contiene información de tamaño para toda tu aplicación (código nativo, código Dart, assets, fuentes, etc.), y puedes generarlo usando la flag --analyze-size:

flutter build <your target platform> --analyze-size

Esto compila tu aplicación, imprime un resumen del tamaño en la línea de comandos e imprime una línea que te indica dónde encontrar el archivo de análisis de tamaño.

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

En este ejemplo, importa el archivo build/apk-code-size-analysis_01.json en la herramienta app size para analizarlo más a fondo. Para obtener más información, consulta la Documentación de App Size.

Para aprender cómo realizar un análisis de tamaño paso a paso de la Wonderous App usando DevTools, echa un vistazo al tutorial de la herramienta App Size. También se discuten varias estrategias para reducir el tamaño de una app.