Memuatkan Modul WASM dalam React

Cara standard pelayar untuk memuatkan modul WASM ialah WebAssembly.instantiateStreaming(fetch(url), importObject). Cara ini menstrim binari WASM semasa ia dimuat turun, memulakan kompilasi serta-merta dan menghasilkan objek yang mengandungi modul serta instans. Inilah kaedah pemuatan yang paling cekap untuk penggunaan dalam produk.

Pembina pakej seperti Vite dan webpack menyokong pengimportan fail WASM sebagai modul ES dengan sintaks import dinamik: import('./module.wasm'). Pembina pakej mengendalikan mekanisme pemuatan. Pendekatan ini bersepadu secara semula jadi dengan pemisahan kod — modul WASM hanya dimuatkan apabila kod yang mengimportnya dijalankan.

Memuatkan modul WASM ialah operasi tak segerak yang sesuai diletakkan dalam cangkuk useEffect. Ambil dan hasilkan instans modul di dalam kesan itu, simpan fungsi yang dieksport dalam keadaan atau rujukan, kemudian kemas kini komponen apabila pemulaan selesai. Tatasusunan kebergantungan yang kosong memastikan modul hanya dimuatkan sekali bagi setiap pemasangan komponen.

Simpan instans WASM dalam useRef untuk mengelakkan pemaparan semula semasa pemulaan, atau dalam pemboleh ubah aras modul jika instans itu ialah singleton yang dikongsi oleh seluruh aplikasi. Menyimpannya dalam useState juga boleh dilakukan, tetapi akan menyebabkan satu pemaparan semula tambahan apabila instans tersedia — perkara ini boleh diterima untuk kes mudah.

Bagi komponen yang memerlukan modul WASM untuk berfungsi, bungkus komponen itu dengan React.lazy dan paparkannya di dalam sempadan Suspense. Modul WASM boleh dimuatkan sebagai sebahagian daripada import dinamik. Suspense memaparkan rangka sandaran semasa modul dimulakan, lalu menyediakan pengalaman pemuatan yang kemas.

Modul WASM mengambil masa 100–500 milisaat untuk dimuatkan dan menghasilkan instans pada sambungan biasa, bergantung pada saiz modul dan kelajuan peranti. Sentiasa paparkan penunjuk pemuatan (rangka, pemutar atau bar kemajuan) semasa pemulaan berlangsung. Menyekat antara muka pengguna semasa pemulaan WASM tanpa maklum balas visual akan membuatkan aplikasi kelihatan tersekat.

Selepas menghasilkan instans, fungsi WASM tersedia melalui instance.exports.myFunction(). Apabila menggunakan wasm-bindgen (rantai alat Rust), modul penghubung JavaScript yang dijana mengeksport fungsi secara langsung dengan penukaran jenis yang betul. Anda memanggilnya seperti fungsi JavaScript biasa menggunakan jenis yang ditakrifkan dalam sumber Rust.

Panggil fungsi WASM daripada pengendali acara React seperti panggilan fungsi segerak biasa: function handleClick() { const result = wasmInstance.current.processImage(imageData); setResult(result); }. Panggilan fungsi WASM adalah segerak — panggilan itu menyekat bebenang yang memanggilnya sehingga pengiraan selesai, yang menjadi satu lagi sebab untuk menjalankannya dalam Worker bagi operasi yang panjang.

Pemulaan WASM boleh gagal: pengambilan mungkin gagal, modul mungkin tidak serasi atau pelayar mungkin tidak mempunyai ciri yang diperlukan. Bungkus komponen yang bergantung pada WASM dalam Sempadan Ralat React untuk menangkap kegagalan pemulaan dan memaparkan kandungan sandaran. Rekodkan ralat untuk penyahpepijatan dan sediakan laluan pengurangan fungsi secara terkawal jika boleh.

Vite memerlukan dua pemalam untuk mengendalikan modul WASM dengan betul: vite-plugin-wasm mengendalikan import fail WASM, manakala vite-plugin-top-level-await membolehkan await aras teratas yang digunakan oleh sesetengah kod penghubung WASM. Pasang kedua-duanya dan tambahkannya ke dalam tatasusunan plugins dalam vite.config.ts.

Bagi projek webpack, dayakan eksperimen asyncWebAssembly dalam webpack.config.js: experiments: { asyncWebAssembly: true }. Ini membolehkan import() fail WASM, dengan pelayar memuatkan modul secara tak segerak. Projek Create React App memerlukan proses eject atau penggunaan CRACO untuk menambah konfigurasi ini.

Muatkan WASM dengan WebAssembly.instantiateStreaming(fetch(url)) atau import dinamik dalam useEffect. Simpan instans dalam useRef atau singleton modul. Paparkan keadaan pemuatan semasa pemulaan selama 100–500 milisaat. Akses eksport melalui instance.exports.fn(). Gunakan Sempadan Ralat untuk kegagalan pemulaan. Konfigurasikan Vite dengan vite-plugin-wasm dan vite-plugin-top-level-await.