es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Importe WASM en un webworker de manera sincrónica utilizando Webpack.

06 Jun, 2023 Programación

He estado siguiendo las guías de wasm_bindgen para crear archivos wasm desde Rust. Esas funcionan bien y tengo algo de código que se puede cargar en mi aplicación principal.

Esa carga funciona a veces, pero con frecuencia no, y la inicialización de mi programa principal se queda colgada. ¿Una condición de carrera?

Estamos cargando el wasm directamente en un webworker. Entonces, mientras que normalmente es necesario cargar el wasm de forma asíncrona, ese requisito no se cumple dentro de los webworkers. Lo que me gustaría hacer es forzar la carga síncrona para ver si esto crea un comportamiento más consistente, sea cual sea la consecuencia de rendimiento.

Aquí está mi configuración:

  • Compila Rust con wasm-pack build (o con wasm-pack build --target web)
  • Copia la salida ./pkg/* en mi código principal
  • En el código principal
// pkg contiene los recursos del ejemplo de wasm_bindgen
import { greet } from "./pkg";
console.log("****después de la importación****");
function ffi_greet(connector, args) {
    console.log("*****SALUDAR*********", args);
    return greet(args[0]);
}

En mi webpack.config.js tengo:

        experiments: {
            asyncWebAssembly: true,
        }

El código parece que es síncrono, pero supongo que webpack está cargando el wasm de forma asíncrona. Mi pregunta es cómo puedo forzar la carga síncrona de wasm en un webworker.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para forzar la carga síncrona de WebAssembly en un web worker con webpack, puedes usar la función importSync proporcionada por wasm-loader. Primero, instala wasm-loader utilizando npm install wasm-loader --save-dev. Luego, actualiza la configuración de webpack para usarlo:

    module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.wasm$/,
        type: "webassembly/sync",
      },
    ],
  },
  experiments: {
    syncWebAssembly: true,
  },
};

    Esto configura webpack para usar el cargador webassembly/sync para archivos .wasm, lo que debería forzar la carga síncrona de los módulos de WebAssembly. Luego, en tu código, usa la función importSync en lugar de import:

    import wasm from "./path/to/wasm.wasm";

const wasmModule = new WebAssembly.Module(wasm);
const wasmInstance = new WebAssembly.Instance(wasmModule, imports);

    Esto debería forzar la carga síncrona del archivo wasm.wasm, lo que puede mejorar la consistencia de la inicialización en la aplicación principal. Ten en cuenta que la carga síncrona puede tener consecuencias en el rendimiento, así que asegúrate de probar a fondo antes de implementar en producción.

Comments are closed.