Kotlin Academy · บทเรียน

Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์

กำหนดเป้าหมายเป็น Kotlin/WASM ผสานการทำงานกับ JavaScript และเรียกใช้ในสภาพแวดล้อมเบราว์เซอร์

บทเรียน 4 จาก 413 ขั้นตอน

Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์ เป็นบทเรียน Kotlin Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Kotlin Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Kotlin Academy มีบทเรียนทั้งหมด 4 บทเรียน

Kotlin/WASM คืออะไร

Kotlin/WASM เป็นเป้าหมายการคอมไพล์ของ Kotlin ที่สร้างโมดูล WebAssembly (.wasm) เพื่อเรียกใช้ในเบราว์เซอร์และรันไทม์ WASM ฝั่งเซิร์ฟเวอร์ โดยแยกจาก Kotlin/JS และให้ประสิทธิภาพที่ดีกว่า รวมถึงขนาดไบนารีที่เล็กกว่าสำหรับโค้ดที่ใช้การคำนวณอย่างหนัก

สถานะปัจจุบัน (Kotlin 2.0)

ตั้งแต่ Kotlin 2.0 เป็นต้นมา Kotlin/WASM มุ่งเป้าไปที่ข้อเสนอ WasmGC ซึ่งเป็นมาตรฐาน W3C ที่นำอ็อบเจ็กต์ซึ่งจัดการการเก็บขยะได้มาไว้ใน WebAssembly โดยตรง WasmGC รองรับใน Chrome 119 ขึ้นไป Firefox 120 ขึ้นไป และ Safari 18 ขึ้นไป Kotlin/WASM มีสถานะเสถียรตั้งแต่ Kotlin 2.1

การตั้งค่าเป้าหมาย Kotlin/WASM

ใน build.gradle.kts ของ KMP ให้ประกาศเป้าหมาย WASM และไบนารีที่เรียกใช้งานได้:

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

การเขียนโค้ด Kotlin สำหรับ WASM

โค้ด Kotlin/WASM มีลักษณะเหมือน Kotlin ปกติ คุณสามารถใช้ตรรกะร่วมกับเป้าหมาย KMP อื่น ๆ ผ่าน commonMain การเข้าถึง 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/

การทำงานร่วมกับ JavaScript ใน Kotlin/WASM

ใช้ @JsExport เพื่อเปิดให้ JavaScript เรียกใช้ฟังก์ชัน Kotlin ใช้การประกาศ external เพื่อเรียกใช้ส่วนติดต่อการเขียนโปรแกรมของ JavaScript จาก Kotlin:

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 ใช้ Kotlin/JS สำหรับเว็บแอปทั่วไป และพิจารณา Kotlin/WASM สำหรับโมดูลที่ต้องการประสิทธิภาพสูง

Compose สำหรับเว็บ (WASM)

Compose Multiplatform ของ JetBrains รองรับ Kotlin/WASM สำหรับสร้างส่วนติดต่อผู้ใช้บนเว็บด้วยส่วนติดต่อการเขียนโปรแกรมของ Compose แบบเดียวกับที่ใช้บน Android และ Desktop ส่วนติดต่อผู้ใช้ทั้งหมดจะแสดงผลเป็นองค์ประกอบ Canvas ผ่าน 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 ที่ไม่ได้ใช้งานออก โดยทั่วไปโปรแกรม hello-world ของ Kotlin/WASM จะมีขนาด 200–400 KB หลังบีบอัดด้วย gzip เปิดใช้ binaryenArgs = listOf("-O3") เพื่อเพิ่มประสิทธิภาพสูงสุด

การใช้โค้ดร่วมกับ JVM และ Kotlin/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 คอมไพล์เป็น WebAssembly ผ่านข้อเสนอ WasmGC ซึ่งมีสถานะเสถียรใน Kotlin 2.1
ประกาศ wasmJs { browser(); binaries.executable() } ในการกำหนดค่า Gradle ของ KMP
เข้าถึง DOM ผ่าน kotlinx-browser และทำงานร่วมกับ JS ผ่าน external กับ @JsExport
สร้างด้วย wasmJsBrowserDistribution และใช้เซิร์ฟเวอร์สำหรับพัฒนาด้วย wasmJsBrowserDevelopmentRun
ใช้ตรรกะโดเมนร่วมกันใน commonMain และเก็บรายละเอียดเฉพาะแพลตฟอร์มไว้ใน wasmJsMain

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 51
บทเรียน: 203

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Kotlin Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Kotlin Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์”

กำหนดเป้าหมายเป็น Kotlin/WASM ผสานการทำงานกับ JavaScript และเรียกใช้ในสภาพแวดล้อมเบราว์เซอร์ คุณปฏิบัติ Kotlin Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Kotlin Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Kotlin Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Kotlin Academy นี้ได้ไหม

ได้ บทเรียน Kotlin Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ภาพรวม Kotlin/Native: เป้าหมาย ชุดเครื่องมือ และการคอมไพล์
การจัดการหน่วยความจำใน Kotlin/Native: MM ใหม่
การเชื่อมต่อกับ C ด้วย cinterop และไฟล์ .def
Kotlin/WASM: การคอมไพล์เป็น WebAssembly สำหรับเบราว์เซอร์

← กลับไปที่ Kotlin Academy