Memuat Modul WASM di React

Cara standar peramban untuk memuat modul WASM adalah WebAssembly.instantiateStreaming(fetch(url), importObject). Cara ini mengalirkan biner WASM saat diunduh, segera memulai kompilasi, dan menghasilkan objek yang berisi modul serta instans. Ini merupakan metode pemuatan paling efisien untuk penggunaan produksi.

Bundler seperti Vite dan webpack mendukung pengimporan berkas WASM sebagai modul ES dengan sintaks impor dinamis: import('./module.wasm'). Bundler menangani mekanisme pemuatan. Pendekatan ini terintegrasi secara alami dengan pemisahan kode—modul WASM dimuat hanya saat kode pengimpornya dijalankan.

Memuat modul WASM adalah operasi asinkron yang semestinya ditempatkan dalam hook useEffect. Ambil dan instansiasikan modul di dalam efek, simpan fungsi yang diekspor dalam status atau referensi, lalu perbarui komponen ketika inisialisasi selesai. Larik dependensi yang kosong memastikan modul hanya dimuat sekali setiap kali komponen dipasang.

Simpan instans WASM dalam useRef agar tidak terjadi perenderan ulang saat inisialisasi, atau dalam variabel tingkat modul jika instans tersebut merupakan instans tunggal yang digunakan bersama di seluruh aplikasi. Menyimpannya dalam useState dapat dilakukan, tetapi menyebabkan satu perenderan ulang tambahan ketika instans tersedia—hal ini dapat diterima untuk kasus sederhana.

Untuk komponen yang memerlukan modul WASM agar dapat berfungsi, bungkus komponen tersebut dengan React.lazy dan render di dalam batas Suspense. Modul WASM dapat dimuat sebagai bagian dari impor dinamis. Suspense menampilkan kerangka pemuatan sementara modul melakukan inisialisasi, sehingga memberikan pengalaman pemuatan yang baik.

Modul WASM memerlukan waktu 100–500 milidetik untuk dimuat dan diinstansiasikan pada koneksi biasa, bergantung pada ukuran modul dan kecepatan perangkat. Selalu tampilkan indikator pemuatan (kerangka, indikator berputar, atau bilah kemajuan) selama inisialisasi berlangsung. Memblokir antarmuka pengguna selama inisialisasi WASM tanpa umpan balik visual akan menimbulkan kesan aplikasi macet.

Setelah instansiasi, fungsi WASM tersedia melalui instance.exports.myFunction(). Saat menggunakan wasm-bindgen (rangkaian alat Rust), modul penghubung JavaScript yang dihasilkan mengekspor fungsi secara langsung dengan konversi tipe yang tepat. Anda memanggilnya seperti fungsi JavaScript biasa dengan tipe yang didefinisikan dalam sumber Rust.

Panggil fungsi WASM dari penangan peristiwa React seperti pemanggilan fungsi sinkron apa pun: function handleClick() { const result = wasmInstance.current.processImage(imageData); setResult(result); }. Pemanggilan fungsi WASM bersifat sinkron—pemanggilan tersebut memblokir utas pemanggil hingga komputasi selesai, yang menjadi alasan lain untuk menjalankannya di Pekerja Web untuk operasi yang lama.

Inisialisasi WASM dapat gagal: pengambilan data mungkin gagal, modul mungkin tidak kompatibel, atau peramban mungkin tidak memiliki fitur tertentu. Bungkus komponen yang bergantung pada WASM dalam Batas Kesalahan React untuk menangkap kegagalan inisialisasi dan menampilkan tampilan pengganti. Catat kesalahan untuk penelusuran kesalahan dan, jika memungkinkan, sediakan jalur penurunan fungsionalitas yang anggun.

Vite memerlukan dua pengaya untuk menangani modul WASM dengan benar: vite-plugin-wasm menangani impor berkas WASM dan vite-plugin-top-level-await mengaktifkan await tingkat atas yang digunakan oleh beberapa kode penghubung WASM. Instal keduanya dan tambahkan ke larik plugins dalam vite.config.ts.

Untuk proyek webpack, aktifkan eksperimen asyncWebAssembly dalam webpack.config.js: experiments: { asyncWebAssembly: true }. Ini memungkinkan import() berkas WASM, dengan peramban memuat modul secara asinkron. Proyek Create React App memerlukan pengeluaran konfigurasi atau penggunaan CRACO untuk menambahkan konfigurasi ini.

Apa keunggulan WebAssembly.instantiateStreaming() dibandingkan WebAssembly.instantiate()?

Muat WASM dengan WebAssembly.instantiateStreaming(fetch(url)) atau impor dinamis dalam useEffect. Simpan instans dalam useRef atau instans tunggal tingkat modul. Tampilkan status pemuatan selama inisialisasi 100–500 milidetik. Akses ekspor melalui instance.exports.fn(). Gunakan Batas Kesalahan untuk kegagalan inisialisasi. Konfigurasikan Vite dengan vite-plugin-wasm dan vite-plugin-top-level-await.