wasm-pack ve React ile Rust'tan WASM'a

Standart Rust-WASM iş akışı iki araç kullanır: wasm-pack derlemeyi yönetir (Rust'ı WASM'e derler, wasm-bindgen'i çalıştırır ve npm paketini oluşturur); wasm-bindgen ise Rust işlevlerinin uygun tür işleme ile normal JavaScript işlevleri olarak çağrılmasını sağlayan JavaScript bağlantıları oluşturur.

#[wasm_bindgen] özniteliği, Rust işlevlerini, yapılarını ve yöntemlerini JavaScript'e dışa aktarmak üzere işaretler. Bu öznitelik olmadan işlev WASM'e derlenir ancak JavaScript'ten erişilemez. Bir işlevi #[wasm_bindgen] ile belirttiğinizde wasm-bindgen, bağımsız değişken ve dönüş değeri dönüştürme işlemlerini yöneten JavaScript bağlantı kodunu oluşturur.

En basit dışa aktarılan Rust işlevi: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. İşlev iki işaretsiz 32 bit tamsayı alır ve bir tane döndürür. wasm-bindgen, bu işlevi sayı türündeki bağımsız değişkenlerle çağıran ve sayı sonucu döndüren JavaScript kodu oluşturur.

Rust paketinin dizininde wasm-pack build --target web komutunu çalıştırın. Bu komut Rust kodunu WASM'e derler, JavaScript bağlantılarını oluşturmak için wasm-bindgen'i çalıştırır ve pkg/ dizininde .wasm ikili dosyasını, bir JavaScript bağlantı modülünü ve TypeScript tür tanımlarını oluşturur.

Oluşturulan modülü React bileşeninizde içe aktarın: import init, { add } from '../pkg/my_lib'. init işlevi WASM ikili dosyasını yükleyip örnek oluşturur (bu işlevi bir useEffect içinde bir kez çağırın). Başlatmadan sonra dışa aktarılan işlevleri doğrudan çağırın: const result = add(2, 3).

İlkel sayıların ötesindeki karmaşık veriler için wasm-bindgen, js_sys::Array (JavaScript dizisi), js_sys::Object (JavaScript nesnesi) ve wasm_bindgen::JsValue (herhangi bir JavaScript değeri) sağlar. Bu türler, Rust işlevlerinin JavaScript dizilerini ve nesnelerini kabul edip döndürmesine olanak tanır; ancak ilkel türlere kıyasla daha fazla serileştirme ek yükü oluşturur.

Temel performans ilkesi şudur: verileri WASM belleğinde tutun ve tüm hesaplamaları orada gerçekleştirin. Veriyi bir kez aktarın, hesaplamayı yapın ve yalnızca nihai sonucu döndürün. Her adımda verileri WASM sınırının ötesine tekrar tekrar aktaran kalıplardan kaçının. Sınır geçişi başına düşen ek yük küçük olsa da sıkı döngülerde birikir.

serde-wasm-bindgen paketi, Serde kullanarak Rust yapılarını JavaScript nesnelerine ve JavaScript nesnelerinden serileştirmenizi sağlar. Yapıya #[derive(Serialize, Deserialize)] açıklamasını ekleyin ve serde_wasm_bindgen::to_value() ile from_value() işlevlerini kullanın. Karmaşık yapılandırılmış verileri aktarmak için standart yaklaşım budur.

Uzun süren WASM hesaplamaları, çalıştıkları iş parçacığını engeller. React'in ana iş parçacığını boş tutmak için WASM'ı bir Web Worker'a yerleştirin. WASM modülünü başlatan ve mesajları işleyen bir Worker dosyası oluşturun. Verileri postMessage aracılığıyla Worker'a gönderin, sonuçları message olayı üzerinden alın ve ardından React durumunu sonuçla güncelleyin.

wasm-pack, dışa aktarılan tüm işlevler ve türler için TypeScript bildirim dosyalarını (.d.ts) otomatik olarak oluşturur. Böylece Rust işlevlerini çağırırken React TypeScript projenizde tam tür güvenliği sağlanır. Oluşturulan türler, Rust işlev imzalarını (örneğin add(a: number, b: number): number) yansıtır ve IDE otomatik tamamlamasının doğru çalışmasını sağlar.

WASM ikili dosyaları, optimizasyondan sonra genellikle 100kb-2MB boyutundadır. Yoğun boyut optimizasyonu için Cargo.toml dosyasındaki yayın profilinde opt-level = "z" ayarını belirleyerek wasm-pack derlemesinde wasm-opt özelliğini etkinleştirin. WASM dosyalarını Content-Type: application/wasm ile sunun ve tarayıcının ikili dosyayı verimli bir şekilde akış olarak alabilmesi için HTTP/2'yi etkinleştirin.

Rust kodundaki #[wasm_bindgen] özniteliğinin amacı nedir?

wasm-pack build --target web, Rust'ı WASM'a derler ve wasm-bindgen aracılığıyla JavaScript bağlamaları oluşturur. Dışa aktarılan işlevlere #[wasm_bindgen] açıklamasını ekleyin. React içinde init işlevini ve dışa aktarılan işlevleri içe aktarın, bir useEffect içinde init() işlevini çağırın ve ardından işlevleri normal JavaScript işlevleri gibi çağırın. Karmaşık yapı serileştirmesi için serde-wasm-bindgen kullanın. Uzun hesaplamalarda React'in ana iş parçacığını boş tutmak için WASM'ı Web Worker'larda çalıştırın.