Compose Multiplatform 中 WASM 应用自定义字体加载优化实践

在 Compose Multiplatform 开发 WASM 应用时，自定义字体的加载性能是一个需要特别关注的问题。本文将从实际案例出发，深入分析字体加载的性能瓶颈，并提供多种优化方案。

问题现象

开发者在使用 Compose Multiplatform 1.6.11 版本开发 WASM 应用时，发现自定义字体在不同设备上的加载性能差异显著：

1. 高性能设备（如 macOS + Firefox）几乎无感知
2. 中端设备（如 Google Pixel 3a + Chrome）有明显延迟
3. 低端设备（如 Allwinner T8100 + Chrome）延迟非常明显

根本原因分析

字体加载性能差异主要源于以下几个方面：

1. 网络请求延迟：即使字体是本地资源，WASM 运行时仍会模拟网络请求
2. 硬件性能差异：低端设备的 JavaScript 执行效率较低
3. 重复加载问题：不当的代码实现可能导致字体被多次加载

优化方案

1. 代码层面优化

关键优化点：避免重复创建 FontFamily 实例

// 优化前 - 每次调用都会触发字体加载
internal val labelTypography: Typography
    @Composable
    get() = Typography(
        displayLarge = MaterialTheme.typography.displayLarge.copy(
            fontFamily = helveticaNeueFontFamily // 每次都会触发加载
        ),
        // 其他样式定义...
    )

// 优化后 - 只加载一次
internal val labelTypography: Typography
    @Composable
    get() {
        val ff = helveticaNeueFontFamily // 只加载一次
        return Typography(
            displayLarge = MaterialTheme.typography.displayLarge.copy(fontFamily = ff),
            // 其他样式定义...
        )
    }

2. HTML 预加载优化

在 index.html 中添加预加载声明，告诉浏览器提前加载字体资源：

<link rel="preload" 
      href="./composeResources/font/HelveticaNeue.ttf" 
      as="fetch" 
      type="font/ttf" 
      crossorigin/>

3. 框架版本升级

Compose Multiplatform 1.7.0-dev1721 版本包含了字体加载的性能优化，建议升级：

// build.gradle.kts
kotlin("wasm") {
    version = "2.0.20-Beta2"
    // ...
}

dependencies {
    implementation("org.jetbrains.compose:compose-runtime:1.7.0-dev1721")
    // ...
}

优化效果对比

经过三种优化方案的综合应用，在不同设备上获得了显著的性能提升：

1. 无优化状态：低端设备上字体加载延迟明显，影响用户体验
2. 代码+HTML优化：延迟显著减少，但仍可感知
3. 全优化方案：即使在低端设备上，字体加载也变得流畅无感知

最佳实践建议

1. 对于生产环境应用，建议同时实施所有三种优化方案
2. 在应用初始化阶段预加载所有需要的字体资源
3. 针对低端设备进行专门的性能测试
4. 考虑使用系统默认字体作为后备方案，确保内容可访问性

通过以上优化措施，开发者可以显著提升 Compose Multiplatform WASM 应用中自定义字体的加载性能，为用户提供更流畅的体验。