จากรัสต์สู่ WASM ด้วย wasm-pack และรีแอ็กต์

กระบวนการทำงานมาตรฐานจาก Rust ไปยัง WASM ใช้เครื่องมือสองรายการ ได้แก่ wasm-pack ซึ่งประสานงานกระบวนการสร้าง (คอมไพล์ Rust เป็น WASM เรียกใช้ wasm-bindgen และสร้างแพ็กเกจ npm) และ wasm-bindgen ซึ่งสร้างการเชื่อมโยง JavaScript ที่ทำให้สามารถเรียกใช้ฟังก์ชัน Rust ได้เหมือนฟังก์ชัน JavaScript ทั่วไป พร้อมจัดการชนิดข้อมูลอย่างถูกต้อง

แอตทริบิวต์ #[wasm_bindgen] ใช้กำกับฟังก์ชัน โครงสร้าง และเมธอดของ Rust เพื่อส่งออกไปยัง JavaScript หากไม่มีแอตทริบิวต์นี้ ฟังก์ชันจะถูกคอมไพล์เป็น WASM แต่ไม่สามารถเข้าถึงจาก JavaScript ได้ เมื่อคุณใส่แอตทริบิวต์ #[wasm_bindgen] ให้กับฟังก์ชัน wasm-bindgen จะสร้างโค้ดเชื่อม JavaScript ที่จัดการการแปลงอาร์กิวเมนต์และค่าที่ส่งคืน

ฟังก์ชัน Rust ที่ส่งออกอย่างง่ายที่สุดคือ use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b } ฟังก์ชันนี้รับจำนวนเต็มไม่ติดเครื่องหมายขนาด 32 บิตสองจำนวนและส่งคืนหนึ่งจำนวน wasm-bindgen จะสร้าง JavaScript ที่เรียกใช้ฟังก์ชันนี้ด้วยอาร์กิวเมนต์ชนิดตัวเลขและส่งคืนผลลัพธ์ชนิดตัวเลข

เรียกใช้ wasm-pack build --target web ในไดเรกทอรีของครейт Rust คำสั่งนี้จะคอมไพล์โค้ด Rust เป็น WASM เรียกใช้ wasm-bindgen เพื่อสร้างการเชื่อมโยง JavaScript และส่งออกไดเรกทอรี pkg/ ที่มีไบนารี .wasm โมดูลโค้ดเชื่อม JavaScript และคำจำกัดความชนิดข้อมูล TypeScript

นำเข้าโมดูลที่สร้างขึ้นในคอมโพเนนต์ React: import init, { add } from '../pkg/my_lib' ฟังก์ชัน init จะโหลดและสร้างอินสแตนซ์ของไบนารี WASM (ให้เรียกใช้ครั้งเดียวใน useEffect) หลังจากเริ่มต้นแล้ว ให้เรียกใช้ฟังก์ชันที่ส่งออกโดยตรง: const result = add(2, 3)

สำหรับข้อมูลซับซ้อนที่นอกเหนือจากจำนวนพื้นฐาน wasm-bindgen มี js_sys::Array (อาร์เรย์ JavaScript), js_sys::Object (ออบเจ็กต์ JavaScript) และ wasm_bindgen::JsValue (ค่า JavaScript ใด ๆ) ชนิดข้อมูลเหล่านี้ช่วยให้ฟังก์ชัน Rust รับและส่งคืนอาร์เรย์กับออบเจ็กต์ JavaScript ได้ แต่มีค่าใช้จ่ายในการทำอนุกรมสูงกว่าชนิดข้อมูลพื้นฐาน

หลักการสำคัญด้านประสิทธิภาพคือ ให้ข้อมูลอยู่ในหน่วยความจำของ WASM และทำการคำนวณทั้งหมดที่นั่น ส่งข้อมูลเข้าไปครั้งเดียว คำนวณ แล้วส่งกลับเฉพาะผลลัพธ์สุดท้าย หลีกเลี่ยงรูปแบบที่ถ่ายโอนข้อมูลข้ามขอบเขตของ WASM ซ้ำ ๆ ในแต่ละขั้นตอน ค่าใช้จ่ายในการข้ามขอบเขตแต่ละครั้งมีเพียงเล็กน้อย แต่จะสะสมขึ้นในลูปที่ทำงานถี่ ๆ

แพ็กเกจ serde-wasm-bindgen ช่วยให้สามารถซีเรียลไลซ์โครงสร้าง Rust ไปเป็นออบเจ็กต์ JavaScript และแปลงกลับได้โดยใช้ Serde ให้ใส่แอตทริบิวต์ #[derive(Serialize, Deserialize)] ที่โครงสร้าง แล้วใช้ serde_wasm_bindgen::to_value() และ from_value() วิธีนี้เป็นแนวทางมาตรฐานสำหรับส่งข้อมูลที่มีโครงสร้างซับซ้อน

การคำนวณด้วย WASM ที่ใช้เวลานานจะบล็อกเธรดที่กำลังทำงานอยู่ ให้เรียกใช้ WASM ใน Web Worker เพื่อให้เธรดหลักของ React ทำงานได้อย่างอิสระ สร้างไฟล์ Worker ที่เริ่มต้นโมดูล WASM และจัดการข้อความ ส่งข้อมูลไปยังเวิร์กเกอร์ผ่าน postMessage รับผลลัพธ์ผ่านเหตุการณ์ message จากนั้นอัปเดตสถานะของ React ด้วยผลลัพธ์ที่ได้

wasm-pack จะสร้างไฟล์ประกาศ TypeScript (.d.ts) ให้โดยอัตโนมัติสำหรับฟังก์ชันและชนิดข้อมูลที่ส่งออกทั้งหมด ทำให้โครงการ React TypeScript ของคุณมีการตรวจสอบชนิดข้อมูลอย่างครบถ้วนเมื่อเรียกใช้ฟังก์ชัน Rust ชนิดข้อมูลที่สร้างขึ้นจะสะท้อนลายเซ็นของฟังก์ชัน Rust — add(a: number, b: number): number — ทำให้การเติมข้อความอัตโนมัติใน IDE ทำงานได้อย่างถูกต้อง

ไบนารี WASM โดยทั่วไปมีขนาด 100kb-2MB หลังการเพิ่มประสิทธิภาพ เปิดใช้ wasm-opt ในการสร้างด้วย wasm-pack โดยกำหนด opt-level = "z" ในโปรไฟล์การเผยแพร่ของ Cargo.toml เพื่อเพิ่มประสิทธิภาพขนาดอย่างเข้มงวด ให้บริการไฟล์ WASM ด้วย Content-Type: application/wasm และเปิดใช้ HTTP/2 เพื่อให้เบราว์เซอร์สตรีมไบนารีได้อย่างมีประสิทธิภาพ

แอตทริบิวต์ #[wasm_bindgen] ในโค้ด Rust มีจุดประสงค์อะไร

wasm-pack build --target web จะคอมไพล์ Rust เป็น WASM และสร้างการเชื่อมโยง JavaScript ผ่าน wasm-bindgen ใส่แอตทริบิวต์ #[wasm_bindgen] ให้กับฟังก์ชันที่ส่งออก นำเข้า init และฟังก์ชันที่ส่งออกใน React เรียก init() ภายใน useEffect จากนั้นเรียกใช้ฟังก์ชันเหล่านั้นเหมือน JavaScript ทั่วไป ใช้ serde-wasm-bindgen สำหรับการซีเรียลไลซ์โครงสร้างที่ซับซ้อน เรียกใช้ WASM ใน Web Worker เมื่อต้องคำนวณเป็นเวลานาน เพื่อให้เธรดหลักของ React ทำงานได้อย่างอิสระ