Von Rust zu WASM mit wasm-pack und React

Der standardmäßige Workflow von Rust zu WASM verwendet zwei Tools: wasm-pack koordiniert den Build (kompiliert Rust zu WASM, führt wasm-bindgen aus und generiert das npm-Paket), während wasm-bindgen JavaScript-Bindings erzeugt, mit denen sich Rust-Funktionen wie gewöhnliche JavaScript-Funktionen aufrufen lassen und die korrekte Typverarbeitung gewährleistet wird.

Das Attribut #[wasm_bindgen] markiert Rust-Funktionen, -Structs und -Methoden für den Export nach JavaScript. Ohne dieses Attribut wird die Funktion zwar zu WASM kompiliert, ist aber aus JavaScript nicht zugänglich. Wenn Sie eine Funktion mit #[wasm_bindgen] annotieren, generiert wasm-bindgen den JavaScript-Glue-Code, der die Konvertierung von Argumenten und Rückgabewerten übernimmt.

Eine minimal exportierte Rust-Funktion: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Die Funktion übernimmt zwei vorzeichenlose 32-Bit-Ganzzahlen und gibt eine zurück. wasm-bindgen generiert JavaScript-Code, der diese Funktion mit numerischen Argumenten aufruft und ein numerisches Ergebnis zurückgibt.

Führen Sie wasm-pack build --target web im Verzeichnis des Rust-Crates aus. Dabei wird der Rust-Code zu WASM kompiliert, wasm-bindgen zur Erzeugung von JavaScript-Bindings ausgeführt und ein Verzeichnis pkg/ erstellt, das die .wasm-Binärdatei, ein JavaScript-Glue-Modul und TypeScript-Typdefinitionen enthält.

Importieren Sie das generierte Modul in Ihre React-Komponente: import init, { add } from '../pkg/my_lib'. Die Funktion init lädt und instanziiert die WASM-Binärdatei. Rufen Sie sie einmal in einem useEffect auf. Nach der Initialisierung können Sie die exportierten Funktionen direkt aufrufen: const result = add(2, 3).

Für komplexe Daten jenseits primitiver Zahlen stellt wasm-bindgen js_sys::Array (JavaScript-Array), js_sys::Object (JavaScript-Objekt) und wasm_bindgen::JsValue (beliebiger JavaScript-Wert) bereit. Mit diesen Typen können Rust-Funktionen JavaScript-Arrays und -Objekte akzeptieren und zurückgeben, allerdings mit höherem Serialisierungsaufwand als bei primitiven Werten.

Das zentrale Prinzip für die Performance lautet: Halten Sie die Daten im WASM-Speicher und führen Sie die gesamte Berechnung dort aus. Übergeben Sie die Daten einmal, führen Sie die Berechnung durch und geben Sie nur das Endergebnis zurück. Vermeiden Sie Muster, bei denen für jeden Schritt wiederholt Daten über die WASM-Grenze übertragen werden. Der Overhead pro Grenzübertritt ist gering, summiert sich aber in engen Schleifen.

Das serde-wasm-bindgen-Crate ermöglicht es, Rust-Structs mithilfe von Serde in JavaScript-Objekte zu serialisieren und daraus zu deserialisieren. Annotieren Sie die Struct mit #[derive(Serialize, Deserialize)] und verwenden Sie serde_wasm_bindgen::to_value() sowie from_value(). Dies ist der Standardansatz für die Übergabe komplexer strukturierter Daten.

Lang laufende WASM-Berechnungen blockieren den Thread, in dem sie ausgeführt werden. Platzieren Sie WASM in einem Web Worker, damit Reacts Hauptthread frei bleibt. Erstellen Sie eine Worker-Datei, die das WASM-Modul initialisiert und Nachrichten verarbeitet. Senden Sie Daten über postMessage an den Worker, empfangen Sie Ergebnisse über das message-Ereignis und aktualisieren Sie anschließend den React-State mit dem Ergebnis.

wasm-pack generiert automatisch TypeScript-Deklarationsdateien (.d.ts) für alle exportierten Funktionen und Typen. Dadurch ist Ihr React-TypeScript-Projekt beim Aufrufen von Rust-Funktionen vollständig typsicher. Die generierten Typen spiegeln die Signaturen der Rust-Funktionen wider — add(a: number, b: number): number —, sodass die IDE-Autovervollständigung korrekt funktioniert.

WASM-Binärdateien sind nach der Optimierung typischerweise 100kb-2MB groß. Aktivieren Sie wasm-opt beim wasm-pack-Build, indem Sie opt-level = "z" im Release-Profil der Cargo.toml setzen, um eine aggressive Größenoptimierung zu erzielen. Liefern Sie WASM-Dateien mit Content-Type: application/wasm aus und aktivieren Sie HTTP/2, damit der Browser die Binärdatei effizient streamen kann.

Welchen Zweck hat das #[wasm_bindgen]-Attribut in Rust-Code?

wasm-pack build --target web kompiliert Rust zu WASM und generiert über wasm-bindgen JavaScript-Bindings. Annotieren Sie exportierte Funktionen mit #[wasm_bindgen]. Importieren Sie init und die exportierten Funktionen in React, rufen Sie init() in einem useEffect auf und rufen Sie die Funktionen anschließend wie gewöhnliche JavaScript-Funktionen auf. Verwenden Sie serde-wasm-bindgen für die Serialisierung komplexer Structs. Führen Sie WASM bei langen Berechnungen in Web Workern aus, damit der React-Hauptthread frei bleibt.