การโหลดโมดูล WASM ในรีแอ็กต์

วิธีมาตรฐานของเบราว์เซอร์ในการโหลดโมดูล WASM คือ WebAssembly.instantiateStreaming(fetch(url), importObject) วิธีนี้จะสตรีมไบนารี WASM ระหว่างดาวน์โหลด เริ่มคอมไพล์ทันที และส่งคืนออบเจ็กต์ที่มีโมดูลกับอินสแตนซ์เมื่อเสร็จสมบูรณ์ นี่คือวิธีโหลดที่มีประสิทธิภาพสูงสุดสำหรับการใช้งานจริง

เครื่องมือรวมชุดโค้ดอย่าง Vite และ webpack รองรับการนำเข้าไฟล์ WASM เป็นโมดูล ES ด้วยไวยากรณ์การนำเข้าแบบไดนามิก: import('./module.wasm') เครื่องมือรวมชุดโค้ดจะจัดการกลไกการโหลดให้ วิธีนี้ผสานเข้ากับการแบ่งโค้ดได้อย่างเป็นธรรมชาติ โมดูล WASM จะโหลดก็ต่อเมื่อโค้ดที่นำเข้าโมดูลทำงาน

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

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

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

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

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

เรียกใช้ฟังก์ชัน WASM จากตัวจัดการเหตุการณ์ของ React ได้เหมือนการเรียกฟังก์ชันแบบซิงโครนัสทั่วไป: function handleClick() { const result = wasmInstance.current.processImage(imageData); setResult(result); } การเรียกฟังก์ชัน WASM เป็นแบบซิงโครนัส จึงบล็อกเธรดที่เรียกใช้จนกว่าการคำนวณจะเสร็จสิ้น นี่เป็นอีกเหตุผลที่ควรเรียกใช้ฟังก์ชันเหล่านี้ในเวิร์กเกอร์เมื่อเป็นการดำเนินการที่ใช้เวลานาน

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

Vite ต้องใช้ปลั๊กอินสองรายการเพื่อจัดการโมดูล WASM อย่างถูกต้อง ได้แก่ vite-plugin-wasm สำหรับจัดการการนำเข้าไฟล์ WASM และ vite-plugin-top-level-await เพื่อเปิดใช้การรอแบบระดับบนสุดที่โค้ดเชื่อม WASM บางส่วนใช้ ให้ติดตั้งทั้งสองรายการและเพิ่มลงในอาร์เรย์ plugins ใน vite.config.ts

สำหรับโครงการ webpack ให้เปิดใช้การทดลอง asyncWebAssembly ใน webpack.config.js: experiments: { asyncWebAssembly: true } การตั้งค่านี้ทำให้สามารถใช้ import() กับไฟล์ WASM โดยเบราว์เซอร์จะโหลดโมดูลแบบอะซิงโครนัส โครงการ Create React App ต้องแยกการตั้งค่าออกด้วยการ eject หรือใช้ CRACO เพื่อเพิ่มการกำหนดค่านี้

ข้อดีของ WebAssembly.instantiateStreaming() เหนือ WebAssembly.instantiate() คืออะไร

โหลด WASM ด้วย WebAssembly.instantiateStreaming(fetch(url)) หรือการนำเข้าแบบไดนามิกใน useEffect จัดเก็บอินสแตนซ์ไว้ใน useRef หรือซิงเกิลตันระดับโมดูล แสดงสถานะการโหลดระหว่างการเริ่มต้นซึ่งใช้เวลา 100–500 มิลลิวินาที เข้าถึงสิ่งที่ส่งออกผ่าน instance.exports.fn() ใช้ขอบเขตดักข้อผิดพลาดสำหรับความล้มเหลวในการเริ่มต้น กำหนดค่า Vite ด้วย vite-plugin-wasm และ vite-plugin-top-level-await