Rust kepada WASM dengan wasm-pack dan React

Aliran kerja standard Rust kepada WASM menggunakan dua alat: wasm-pack menyelaraskan binaan (mengkompilkan Rust kepada WASM, menjalankan wasm-bindgen dan menjana pakej npm), manakala wasm-bindgen menjana pengikatan JavaScript yang menjadikan fungsi Rust boleh dipanggil seperti fungsi JavaScript biasa dengan pengendalian jenis yang betul.

Atribut #[wasm_bindgen] menandakan fungsi, struktur dan kaedah Rust untuk dieksport kepada JavaScript. Tanpanya, fungsi tersebut dikompilkan kepada WASM tetapi tidak boleh diakses daripada JavaScript. Apabila anda menganotasi fungsi dengan #[wasm_bindgen], wasm-bindgen menjana kod penghubung JavaScript yang mengendalikan penukaran argumen dan nilai pulangan.

Fungsi Rust yang dieksport secara minimum: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Fungsi ini menerima dua integer tidak bertanda 32-bit dan mengembalikan satu nilai. wasm-bindgen menjana JavaScript yang memanggil fungsi ini dengan argumen nombor dan mengembalikan hasil nombor.

Jalankan wasm-pack build --target web dalam direktori pakej Rust. Proses ini mengkompilkan kod Rust kepada WASM, menjalankan wasm-bindgen untuk menjana pengikatan JavaScript dan menghasilkan direktori pkg/ yang mengandungi binari .wasm, modul penghubung JavaScript dan definisi jenis TypeScript.

Import modul yang dijana dalam komponen React anda: import init, { add } from '../pkg/my_lib'. Fungsi init memuatkan dan menghasilkan instans binari WASM (panggilnya sekali dalam useEffect). Selepas pemulaan, panggil fungsi yang dieksport secara langsung: const result = add(2, 3).

Untuk data kompleks yang melangkaui nombor primitif, wasm-bindgen menyediakan js_sys::Array (Array JavaScript), js_sys::Object (Object JavaScript) dan wasm_bindgen::JsValue (sebarang nilai JavaScript). Jenis ini membolehkan fungsi Rust menerima dan mengembalikan tatasusunan serta objek JavaScript, walaupun dengan overhed pensirilan yang lebih tinggi berbanding jenis primitif.

Prinsip prestasi utama ialah mengekalkan data dalam memori WASM dan melakukan semua pengiraan di situ. Hantar data sekali, lakukan pengiraan, kemudian pulangkan hanya hasil akhir. Elakkan corak yang memindahkan data berulang kali merentasi sempadan WASM bagi setiap langkah. Overhed bagi setiap lintasan sempadan adalah kecil, tetapi terkumpul dalam gelung yang ketat.

Pakej serde-wasm-bindgen membolehkan struktur Rust disiri dan dinyiri daripada objek JavaScript menggunakan Serde. Anotasikan struktur dengan #[derive(Serialize, Deserialize)] dan gunakan serde_wasm_bindgen::to_value() serta from_value(). Inilah pendekatan piawai untuk menghantar data berstruktur yang kompleks.

Pengiraan WASM yang berjalan lama akan menyekat bebenang tempatnya dijalankan. Letakkan WASM dalam Pekerja Web supaya bebenang utama React kekal bebas. Cipta fail Worker yang memulakan modul WASM dan mengendalikan mesej. Hantar data kepada Worker melalui postMessage, terima hasil melalui peristiwa message, kemudian kemas kini keadaan React dengan hasil tersebut.

wasm-pack menjana fail pengisytiharan TypeScript (.d.ts) secara automatik untuk semua fungsi dan jenis yang dieksport. Ini memberikan projek React TypeScript Anda keselamatan jenis sepenuhnya apabila memanggil fungsi Rust. Jenis yang dijana mencerminkan tandatangan fungsi Rust — add(a: number, b: number): number — lalu pelengkapan automatik IDE berfungsi dengan betul.

Binari WASM biasanya bersaiz 100kb-2MB selepas pengoptimuman. Aktifkan wasm-opt dalam binaan wasm-pack dengan menetapkan opt-level = "z" dalam profil keluaran Cargo.toml untuk pengoptimuman saiz yang agresif. Hidangkan fail WASM dengan Content-Type: application/wasm dan aktifkan HTTP/2 supaya pelayar menstrim binari dengan cekap.

wasm-pack build --target web menyusun Rust kepada WASM dan menjana pengikatan JavaScript melalui wasm-bindgen. Anotasikan fungsi yang dieksport dengan #[wasm_bindgen]. Import init dan fungsi yang dieksport dalam React, panggil init() dalam useEffect, kemudian panggil fungsi tersebut seperti JavaScript biasa. Gunakan serde-wasm-bindgen untuk penyirian struktur yang kompleks. Jalankan WASM dalam Pekerja Web untuk pengiraan yang lama supaya bebenang utama React kekal bebas.