Jetpack Compose のパフォーマンス確認するための2つ公式のツール

その @Composable が compose/recomposeされるタイミング、把握したいですよね。

Google や Android 公式から公開されている2つのツールを使ってみましょう。

サンプル

Button を使ったカウンターを ViewModel を使って作成します。

👉 「Compose Compiler Reports」 recompose される条件とタイミングと範囲を知りたい

RecomposeHighlighter

シンプルな Modifier Extension Functionです。

視覚的に、recompose の処理の回数を確認できます。

👉 RecomposeHighlighter.kt at master · android/snippets

  Button(
    onClick = onClick,
    modifier = Modifier.recomposeHighlighter() // *
  ) {
    Text("A: $count")
  }

👉 How can I debug recompositions in Jetpack Compose?

ComposeCompilerReports/Metrics

The Compose Compiler plugin can generate reports / metrics around certain compose-specific concepts that can be useful to understand what is happening with some of your compose code at a fine-grained level.

👉 androidx/compiler-metrics.md at androidx-main · androidx/androidx

// build.gradle

 kotlinOptions {
  if (project.findProperty("composeCompilerReports") == "true") {
    freeCompilerArgs += [
        "-P",
        "plugin:androidx.compose.compiler.plugins.kotlin:reportsDestination=" +
            project.buildDir.absolutePath + "/compose_compiler"
    ]
  }
  if (project.findProperty("composeCompilerMetrics") == "true") {
    freeCompilerArgs += [
        "-P",
        "plugin:androidx.compose.compiler.plugins.kotlin:metricsDestination=" +
            project.buildDir.absolutePath + "/compose_compiler"
    ]
  }
}

./gradlew assembleRelease -PcomposeCompilerReports=true 

./gradlew assembleRelease -PcomposeCompilerMetrics=true

unstable class HomeViewModel {
  stable val _countState: MutableState<Int>
  stable val countState: State<Int>
  unstable val _countStateFlow: MutableStateFlow<Int>
  unstable val countStateFlow: StateFlow<Int>
  <runtime stability> = Unstable
}

restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun HomeScreen(
  unstable viewModel: HomeViewModel? = @dynamic hiltViewModel(null, $composer, 0, 0b0001)
)
restartable skippable scheme("[androidx.compose.ui.UiComposable]") fun ButtonA(
  stable count: Int
  stable onClick: Function0<Unit>
)

{
 "skippableComposables": 103,
 "restartableComposables": 111,
 "readonlyComposables": 0,
 "totalComposables": 112,
 "restartGroups": 111,
 "totalGroups": 122,
 "staticArguments": 188,
 "certainArguments": 12,
 "knownStableArguments": 1116,
 "knownUnstableArguments": 17,
 "unknownStableArguments": 6,
 "totalArguments": 1139,
 "markedStableClasses": 0,
 "inferredStableClasses": 13,
 "inferredUnstableClasses": 8,
 "inferredUncertainClasses": 1,
 "effectivelyStableClasses": 13,
 "totalClasses": 22,
 "memoizedLambdas": 86,
 "singletonLambdas": 10,
 "singletonComposableLambdas": 39,
 "composableLambdas": 62,
 "totalLambdas": 109
}

まとめ

少しづつ謎が明らかになって、すっきりしていきます。

👉 「Compose Compiler Reports」 recompose される条件とタイミングと範囲を知りたい
👉 【Jetpack Compose】「Layout Inspector Recomposition counts」で re-compose 回数を確認する