Android のマルチモジュール化で Preview の高速化

今回は Android のプロジェクトをマルチモジュール化し、Jetpack Compose の Preview を高速化してみました。

[目次]

環境
マルチモジュール化のメリット
- デメリット
マルチモジュール化の方法
プレビュー速度の向上
Links
おわりに

環境

- PC
    - macOS version 12.4
    - Apple M1 chip
    - Memory 16 GB
- Android Project
    - compose "1.3.0-rc01"
    - kotlin "1.7.1"

マルチモジュール化のメリット

ビルド時間の短縮
- 2 回目以降のビルドは、変更の入ったモジュールのみになるため速い！
レイヤー間の依存関係の強制
各モジュールの関心ごとを小さくできる
- package ではクラスのグルーピングしかできないが、レイアウトファイルや resource 等も含めたグルーピングが可能！
- string, layout, manifest 等が機能単位に集約され、見やすい
- internal 修飾子による、モノリスより柔軟な可視性制御
Compose の Preview も速くなる

特に『Compose の Preview を速くする』ことを目的に、今回はとあるプロジェクトをマルチモジュール化してみました。

デメリット

メリットだけだと不公平なので、デメリットも思いつく限り記載しておきます。

初回ビルドは時間がかかる
- らしい
- 対象モジュールを結合するため
浅いモジュールを作りすぎると、複雑性が増して保守しにくくなる
- 分割の仕方大事そう

マルチモジュール化の方法

『既存の Android アプリを multi-module project 化』のサイトが詳しいですが、概略としては以下のステップで可能です。

File > New > New Module
- 何もなければ No Activity で
フォルダ構造を変更（refactor）
1. settings.gradle も変更する
2. ':data' -> ':core:data'
余計なファイルを削除する
- drawable など

module にするときは、build.gradle > plugins の com.android.application の値を com.android.library に変更します。

// module になる側
plugins {
    // id 'com.android.application'
    id 'com.android.library'
    ...
}

また、module を import したい時は、build.gradle に以下のように記載します。

// module を使う側
android {
    ...
}
dependencies {
    ...
    // modules
    implementation project(":core:common")
    implementation project(":core:domain")
}

（実際にやった対応とリポジトリです。）

プレビュー速度の向上

Jetpack Compose には UI を即座に確認できる『Preview』が用意されております。

@Preview
@Composable
fun MainViewPreview() {
    val uiState = MemberListUiState()

    CustomTheme() {
        MainView(uiState = uiState)
    }
}

ここでは Preview を行う際に重要となる次の 3 つの動作について、それぞれ変更前と後で時間を比較しました。

1. Build Refresh
2. Preview の内容を変更した際に変更を反映させます。
1. Start Interactive Mode
2. Interactive Mode（Preview Mode でタッチ操作可能なモード）を有効にする
1. Stop Interactive Mode
2. Interactive Mode を止める

それぞれ 3 回ずつ測定し平均を求めております。

変更前		マルチモジュール
12.1	1.Build	7.5
9.5	2.Start 画面 1	2.6
11.2	2.Start 画面 2	2.9
8.7	3.Stop 画面 1	3.2
9.3	3.Stop 画面 2	2.7

2~3 倍程度速度の高速化が確認できました。

おわりに

今までは正直、Preview の動作が重くて使ってなかったのですが、これでようやく使い物になりそうです。

また、マルチモジュール化を行うことで各レイヤー・各画面の責務を考えるきっかけになったのでよかったです。

Diary

日々学んだことをアウトプットする場として初めてみました