Kotlin Academy · Pelajaran

Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar

Sasarkan Kotlin/WASM, integrasikannya dengan JavaScript dan jalankannya dalam persekitaran pelayar.

Pelajaran 4 daripada 413 langkah

Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar ialah pelajaran Kotlin Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Kotlin Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Kotlin Academy merangkumi sejumlah 4 pelajaran.

Apakah Kotlin/WASM?

Kotlin/WASM ialah sasaran kompilasi Kotlin yang menghasilkan modul WebAssembly (.wasm) untuk dilaksanakan dalam pelayar dan masa jalan WASM sisi pelayan. Ia berasingan daripada Kotlin/JS dan memberikan prestasi yang lebih baik serta saiz binari yang lebih kecil untuk kod yang intensif pengiraan.

Status Semasa (Kotlin 2.0)

Setakat Kotlin 2.0, Kotlin/WASM menyasarkan cadangan WasmGC — piawaian W3C yang membawa objek dengan kutipan sampah secara natif ke WebAssembly. WasmGC disokong dalam Chrome 119+, Firefox 120+ dan Safari 18+. Kotlin/WASM berstatus Stabil mulai Kotlin 2.1.

Menyediakan Sasaran Kotlin/WASM

Dalam build.gradle.kts KMP anda, isytiharkan sasaran WASM dan binari boleh laku:

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

Menulis Kod Kotlin untuk WASM

Kod Kotlin/WASM kelihatan seperti Kotlin biasa. Anda boleh berkongsi logik dengan sasaran KMP lain melalui commonMain. Akses DOM pelayar dilakukan melalui pustaka 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)
}

Membina dan Menjalankan

Jalankan ./gradlew wasmJsBrowserDevelopmentRun untuk memulakan pelayan pembangunan dengan muat semula langsung. Untuk binaan produksi: ./gradlew wasmJsBrowserDistribution. Hasilnya berada dalam build/dist/wasmJs/productionExecutable/.

Interoperasi JavaScript dalam Kotlin/WASM

Gunakan @JsExport untuk mendedahkan fungsi Kotlin kepada JavaScript. Gunakan pengisytiharan external untuk memanggil API JavaScript daripada Kotlin:

external fun console_log(msg: String): Unit

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

Kotlin/WASM berbanding Kotlin/JS

Kotlin/JS: menukar Kotlin kepada JavaScript — akses kepada seluruh ekosistem JS, alat pembangunan yang matang dan berjalan di mana-mana JS berjalan. Kotlin/WASM: dikompil kepada WebAssembly — pelaksanaan lebih pantas untuk kod yang banyak pengiraan, model memori selamat jenis dan memerlukan sokongan pelayar untuk WasmGC. Gunakan Kotlin/JS untuk aplikasi web umum; pertimbangkan Kotlin/WASM untuk modul yang kritikal dari segi prestasi.

Compose untuk Web (WASM)

Compose Multiplatform milik JetBrains menyasarkan Kotlin/WASM untuk membina antara muka web dengan API Compose yang sama seperti yang digunakan pada Android dan Desktop. Seluruh antara muka pengguna dipaparkan pada elemen Canvas melalui 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!")
}

Saiz Binari dan Pengoptimuman

Binari WASM dioptimumkan dengan wasm-opt semasa binaan produksi. Penggoncangan pepohon membuang kod pustaka standard Kotlin yang tidak digunakan. Hello-world Kotlin/WASM lazimnya berukuran 200–400 KB selepas dimampatkan dengan gzip. Aktifkan binaryenArgs = listOf("-O3") untuk pengoptimuman maksimum.

Berkongsi Kod dengan JVM dan Native

Oleh sebab Kotlin/WASM ialah sasaran KMP, logik domain, algoritma dan model data dalam commonMain dikongsi secara automatik. Kod khusus platform (manipulasi DOM, input/output fail) berada dalam wasmJsMain menggunakan pengisytiharan actual.

Had dan Pelan Hala Tuju

Had semasa: tiada akses terus kepada pakej NPM (gunakan interoperasi JS), sokongan penyahpepijat yang terhad berbanding Kotlin/JS, dan sokongan pelayar untuk WasmGC diperlukan (tidak tersedia dalam pelayar lama). Pasukan Kotlin sedang giat menambah baik alat pembangunan, prestasi dan liputan pustaka standard untuk WASM.

Semakan Pantas

Apakah cadangan WebAssembly yang disasarkan oleh Kotlin/WASM (Kotlin 2.0+), yang membolehkan objek dengan kutipan sampah secara natif dalam WASM?

Jawab dalam pelajaran interaktif

Ringkasan: Kotlin/WASM

Inti pati utama:

Kotlin/WASM dikompil kepada WebAssembly melalui cadangan WasmGC (Stabil dalam Kotlin 2.1)
Isytiharkan wasmJs { browser(); binaries.executable() } dalam konfigurasi Gradle KMP
Akses DOM melalui kotlinx-browser; interoperasi JS melalui external dan @JsExport
Bina dengan wasmJsBrowserDistribution; pelayan pembangunan dengan wasmJsBrowserDevelopmentRun
Kongsi logik domain dalam commonMain; butiran khusus platform dalam wasmJsMain

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 51
Pelajaran: 203

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Kotlin Academy, termasuk “Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Kotlin Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar”?

Sasarkan Kotlin/WASM, integrasikannya dengan JavaScript dan jalankannya dalam persekitaran pelayar. Anda berlatih Kotlin Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Kotlin Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Kotlin Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Kotlin Academy ini?

Ya. Setiap pelajaran Kotlin Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Gambaran Keseluruhan Kotlin/Native: Sasaran, Rangkaian Alat dan Kompilasi
Pengurusan Memori dalam Kotlin/Native: MM Baharu
Saling Kendali C dengan Alat cinterop dan Fail .def
Kotlin/WASM: Mengkompilasi kepada WebAssembly untuk Pelayar

← Kembali ke Kotlin Academy