Från Rust till WASM med wasm-pack och React

Det standardiserade arbetsflödet från Rust till WASM använder två verktyg: wasm-pack samordnar bygget (kompilerar Rust till WASM, kör wasm-bindgen och genererar npm-paketet), medan wasm-bindgen genererar JavaScript-bindningar som gör Rust-funktioner anropbara som vanliga JavaScript-funktioner med korrekt typhantering.

Attributet #[wasm_bindgen] markerar Rust-funktioner, strukturer och metoder för export till JavaScript. Utan attributet kompileras funktionen till WASM men är inte åtkomlig från JavaScript. När du annoterar en funktion med #[wasm_bindgen] genererar wasm-bindgen JavaScript-gluekoden som hanterar konvertering av argument och returvärden.

En minimal exporterad Rust-funktion: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Funktionen tar två osignerade 32-bitarsheltal och returnerar ett. wasm-bindgen genererar JavaScript som anropar funktionen med numeriska argument och returnerar ett numeriskt resultat.

Kör wasm-pack build --target web i Rust-cratens katalog. Detta kompilerar Rust-koden till WASM, kör wasm-bindgen för att generera JavaScript-bindningar och skapar en katalog med namnet pkg/ som innehåller binärfilen .wasm, en JavaScript-gluemodul och typdefinitioner för TypeScript.

Importera den genererade modulen i din React-komponent: import init, { add } from '../pkg/my_lib'. Funktionen init läser in och instansierar WASM-binären; anropa den en gång i en useEffect. Efter initieringen anropar du de exporterade funktionerna direkt: const result = add(2, 3).

För komplexa data utöver primitiva tal tillhandahåller wasm-bindgen js_sys::Array (JavaScript Array), js_sys::Object (JavaScript Object) och wasm_bindgen::JsValue (vilket JavaScript-värde som helst). Dessa typer gör att Rust-funktioner kan ta emot och returnera JavaScript-arrayer och -objekt, men med större serialiseringskostnad än för primitiva värden.

Den viktigaste prestandaprincipen är att hålla data i WASM-minnet och utföra all beräkning där. Skicka in data en gång, utför beräkningen och returnera endast det slutliga resultatet. Undvik mönster där data överförs över WASM-gränsen upprepade gånger för varje steg. Overheaden per gränsövergång är liten, men den ackumuleras i prestandakritiska loopar.

Crate:et serde-wasm-bindgen gör det möjligt att serialisera Rust-structar till och från JavaScript-objekt med hjälp av Serde. Förse structen med #[derive(Serialize, Deserialize)] och använd serde_wasm_bindgen::to_value() och from_value(). Detta är standardmetoden för att överföra komplexa strukturerade data.

Långvariga WASM-beräkningar blockerar tråden de körs i. Placera WASM i en Web Worker för att hålla Reacts huvudtråd fri. Skapa en Worker-fil som initierar WASM-modulen och hanterar meddelanden. Skicka data till workern via postMessage, ta emot resultat via händelsen message och uppdatera sedan React-tillståndet med resultatet.

wasm-pack genererar automatiskt TypeScript-deklarationsfiler (.d.ts) för alla exporterade funktioner och typer. Det ger ert React TypeScript-projekt full typsäkerhet när ni anropar Rust-funktioner. De genererade typerna återspeglar Rust-funktionssignaturerna — add(a: number, b: number): number — så att IDE:ns autocomplettering fungerar korrekt.

WASM-binärfiler är vanligtvis 100kb–2MB efter optimering. Aktivera wasm-opt i wasm-pack-bygget genom att ange opt-level = "z" i release-profilen i Cargo.toml för aggressiv storleksoptimering. Servera WASM-filer med Content-Type: application/wasm och aktivera HTTP/2 så att webbläsaren kan strömma binärfilen effektivt.

wasm-pack build --target web kompilerar Rust till WASM och genererar JavaScript-bindningar via wasm-bindgen. Förse exporterade funktioner med #[wasm_bindgen]. Importera init och de exporterade funktionerna i React, anropa init() i en useEffect och anropa sedan funktionerna som vanlig JavaScript. Använd serde-wasm-bindgen för serialisering av komplexa structar. Kör WASM i Web Workers vid långvariga beräkningar för att hålla Reacts huvudtråd fri.