React'te WASM Modüllerini Yükleme

Bir WASM modülünü yüklemenin tarayıcı standardındaki yolu WebAssembly.instantiateStreaming(fetch(url), importObject) kullanmaktır. Bu yöntem, WASM ikili dosyasını indirilirken akış hâlinde işler, derlemeyi hemen başlatır ve modülü ile örneği içeren bir nesneyle sonuçlanır. Üretim kullanımı için en verimli yükleme yöntemidir.

Vite ve webpack gibi paketleyiciler, WASM dosyalarının dinamik içe aktarma söz dizimiyle ES modülleri olarak içe aktarılmasını destekler: import('./module.wasm'). Yükleme işlemlerini paketleyici yönetir. Bu yaklaşım kod bölmeyle doğal biçimde bütünleşir — WASM modülü yalnızca içe aktaran kod çalıştığında yüklenir.

Bir WASM modülünü yüklemek, useEffect kancasına ait olan eşzamansız bir işlemdir. Modülü efektin içinde alın ve örnekleyin, dışa aktarılan işlevleri bir durumda veya başvuruda saklayın ve başlatma tamamlandığında bileşeni güncelleyin. Boş bağımlılık dizisi, modülün bileşen her ekrana eklendiğinde yalnızca bir kez yüklenmesini sağlar.

Başlatma sırasında yeniden görüntülemeleri önlemek için WASM örneğini bir useRef içinde saklayın veya örnek uygulama genelinde paylaşılan tekil bir örnekse modül düzeyinde bir değişkende tutun. Örneği useState içinde saklamak da işe yarar; ancak örnek kullanılabilir olduğunda ek bir yeniden görüntülemeye neden olur — basit durumlarda bu kabul edilebilir.

Çalışmak için bir WASM modülü gerektiren bileşenleri React.lazy ile sarmalayın ve bunları bir Suspense sınırı içinde görüntüleyin. WASM modülü, dinamik içe aktarmanın bir parçası olarak yüklenebilir. Suspense, modül başlatılırken bir yedek iskelet göstererek düzgün bir yükleme deneyimi sağlar.

WASM modüllerinin yüklenip örneklenmesi, modül boyutuna ve cihaz hızına bağlı olarak tipik bir bağlantıda 100-500 ms sürer. Başlatma devam ederken her zaman bir yükleme göstergesi (iskelet, döndürücü veya ilerleme çubuğu) gösterin. Görsel geri bildirim olmadan kullanıcı arayüzünü WASM başlatılana kadar engellemek, algılanan bir donma oluşturur.

Örnek oluşturulduktan sonra WASM işlevlerine instance.exports.myFunction() üzerinden erişilebilir. wasm-bindgen (Rust araç zinciri) kullanılırken oluşturulan JavaScript bağlantı modülü, uygun tür dönüştürme işlemiyle işlevleri doğrudan dışa aktarır. Bunları Rust kaynak kodunda tanımlanan türlerle normal JavaScript işlevleri gibi çağırırsınız.

WASM işlevlerini React olay işleyicilerinden herhangi bir eşzamanlı işlev çağrısı gibi çağırın: function handleClick() { const result = wasmInstance.current.processImage(imageData); setResult(result); }. WASM işlev çağrıları eşzamanlıdır — hesaplama tamamlanana kadar çağrıyı yapan iş parçacığını engeller; uzun işlemler için bunları bir web çalışanında çalıştırmak bu nedenle önemlidir.

WASM başlatması başarısız olabilir: alma işlemi başarısız olabilir, modül uyumsuz olabilir veya tarayıcıda gerekli bir özellik bulunmayabilir. Başlatma başarısızlıklarını yakalamak ve bir yedek görüntülemek için WASM'e bağlı bileşenleri bir React Hata Sınırı ile sarmalayın. Hata ayıklama amacıyla hatanın kaydını tutun ve mümkünse zarif bir geri dönüş yolu sağlayın.

Vite'in WASM modüllerini düzgün işleyebilmesi için iki eklenti gerekir: vite-plugin-wasm WASM dosyalarının içe aktarılmasını yönetir ve vite-plugin-top-level-await bazı WASM bağlantı kodlarının kullandığı üst düzey await'i etkinleştirir. Her ikisini de yükleyin ve vite.config.ts içindeki plugins dizisine ekleyin.

webpack projelerinde, webpack.config.js içindeki asyncWebAssembly deneyini etkinleştirin: experiments: { asyncWebAssembly: true }. Bu, WASM dosyalarının import() ile içe aktarılmasını ve tarayıcının modülü eşzamansız olarak yüklemesini sağlar. Create React App projelerinde bu yapılandırmayı eklemek için dışa aktarma işlemi yapılması veya CRACO kullanılması gerekir.

WebAssembly.instantiateStreaming() kullanmanın WebAssembly.instantiate() kullanmaya göre avantajı nedir?

WASM'i WebAssembly.instantiateStreaming(fetch(url)) veya useEffect içinde dinamik içe aktarma ile yükleyin. Örneği useRef içinde veya bir modül tekil örneğinde saklayın. 100-500 ms'lik başlatma sürecinde yükleme durumunu gösterin. Dışa aktarımlara instance.exports.fn() üzerinden erişin. Başlatma başarısızlıkları için Hata Sınırlarını kullanın. Vite'i vite-plugin-wasm ve vite-plugin-top-level-await ile yapılandırın.