Kotlin Academy · 课时

Kotlin/WASM：为浏览器编译为 WebAssembly

Q: 「Kotlin/WASM：为浏览器编译为 WebAssembly」这节课中我会学到什么？

将 Kotlin/WASM 作为目标，与 JavaScript 集成，并在浏览器环境中运行。 你通过在浏览器中直接运行的动手代码来练习 Kotlin Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 Kotlin/WASM 作为目标，与 JavaScript 集成，并在浏览器环境中运行。

Kotlin/WASM：为浏览器编译为 WebAssembly 是 CoddyKit 上的免费 Kotlin Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Kotlin Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Kotlin Academy 课程共包含 4 节课。

什么是 Kotlin/WASM

Kotlin/WASM 是一种 Kotlin 编译目标，可生成用于在浏览器和服务器端 WASM 运行时中执行的 WebAssembly（.wasm）模块。它与 Kotlin/JS 相互独立，并能为计算密集型代码提供更高的性能和更小的二进制文件大小。

当前状态（Kotlin 2.0）

截至 Kotlin 2.0，Kotlin/WASM 面向 WasmGC 提案——这是一项将垃圾回收对象原生引入 WebAssembly 的 W3C 标准。Chrome 119 及更高版本、Firefox 120 及更高版本以及 Safari 18 及更高版本均支持 WasmGC。Kotlin/WASM 自 Kotlin 2.1 起达到稳定状态。

设置 Kotlin/WASM 目标

在 KMP 的 build.gradle.kts 中声明 WASM 目标和可执行二进制文件：

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

为 WASM 编写 Kotlin 代码

Kotlin/WASM 代码看起来与普通 Kotlin 代码一样。您可以通过 commonMain 与其他 KMP 目标共享逻辑。浏览器 DOM 访问通过 kotlinx-browser 库实现：

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

构建和运行

运行 ./gradlew wasmJsBrowserDevelopmentRun，启动带有实时重新加载功能的开发服务器。要构建生产版本，请运行：./gradlew wasmJsBrowserDistribution。输出位于 build/dist/wasmJs/productionExecutable/ 中。

Kotlin/WASM 中的 JavaScript 互操作

使用 @JsExport 将 Kotlin 函数公开给 JavaScript。使用 external 声明从 Kotlin 调用 JavaScript API：

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASM 与 Kotlin/JS

Kotlin/JS：转译为 JavaScript——可访问完整的 JS 生态系统，工具链成熟，并且可以在任何运行 JS 的环境中运行。Kotlin/WASM：编译为 WebAssembly——计算密集型代码执行速度更快，内存模型具有类型安全性，但需要浏览器支持 WasmGC。对于常规 Web 应用，请使用 Kotlin/JS；对于对性能要求较高的模块，可以考虑 Kotlin/WASM。

Web 版 Compose（WASM）

JetBrains 的 Compose Multiplatform 以 Kotlin/WASM 为目标，用于构建 Web 用户界面，并使用与 Android 和 Desktop 相同的 Compose API。整个用户界面通过 WASM 渲染到画布元素中：

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

二进制文件大小与优化

在生产构建期间，WASM 二进制文件会使用 wasm-opt 进行优化。摇树优化会移除未使用的 Kotlin 标准库代码。典型的 Kotlin/WASM Hello World 示例经 gzip 压缩后大小为 200–400 KB。启用 binaryenArgs = listOf("-O3") 可实现最大程度的优化。

与 JVM 和 Native 共享代码

由于 Kotlin/WASM 是 KMP 目标，commonMain 中的领域逻辑、算法和数据模型会自动共享。平台特定代码（DOM 操作、文件输入/输出）位于 wasmJsMain 中，并使用 actual 声明。

限制与路线图

当前限制包括：无法直接访问 NPM 包（请使用 JS 互操作）、与 Kotlin/JS 相比调试器支持有限，以及需要浏览器支持 WasmGC（旧版浏览器不支持）。Kotlin 团队正在积极改进 WASM 的工具链、性能和标准库覆盖范围。

快速检查

Kotlin/WASM（Kotlin 2.0 及更高版本）面向哪项 WebAssembly 提案，使 WASM 能够原生支持垃圾回收对象？

回顾：Kotlin/WASM

要点：

Kotlin/WASM 通过 WasmGC 提案编译为 WebAssembly（该提案在 Kotlin 2.1 中达到稳定状态）
在 KMP Gradle 配置中声明 wasmJs { browser(); binaries.executable() }
通过 kotlinx-browser 访问 DOM；通过 external 和 @JsExport 实现 JS 互操作
使用 wasmJsBrowserDistribution 构建；使用 wasmJsBrowserDevelopmentRun 启动开发服务器
在 commonMain 中共享领域逻辑；在 wasmJsMain 中编写平台特定代码

常见问题解答

「Kotlin/WASM：为浏览器编译为 WebAssembly」课时是免费的吗？

是的 — 「Kotlin/WASM：为浏览器编译为 WebAssembly」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Kotlin Academy 课程的其余内容，请升级到 CoddyKit PRO。 Kotlin Academy 课程共包含 4 节课。

「Kotlin/WASM：为浏览器编译为 WebAssembly」这节课中我会学到什么？

将 Kotlin/WASM 作为目标，与 JavaScript 集成，并在浏览器环境中运行。你通过在浏览器中直接运行的动手代码来练习 Kotlin Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Kotlin Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Kotlin Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Kotlin/WASM：为浏览器编译为 WebAssembly」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Kotlin Academy 课中编写并运行代码吗？

能。每节 Kotlin Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Kotlin Academy