Как загрузить два или более одинаковых модулей веб-сборки из одного файла Wasm? - PullRequest
0 голосов
/ 26 января 2020

Недавно я использовал веб-пакет для загрузки модуля веб-сборки, но обнаружил, что текущий механизм не позволяет мне загружать два или более идентичных модуля веб-сборки

Моя веб-сборка создается с помощью цепочки инструментов ржавчины, поэтому он также будет генерировать файл js одновременно, поэтому я динамически загружаю сгенерированный файл js.

Моя задача заключается в том, чтобы я мог импортировать несколько экземпляров, которые не влияют друг на друга, через несколько import(). Простая демонстрация выглядит следующим образом:

const js = import (/ * webpackChunkName: "view_sketch_wasm" * / "../pkg/hello_wasm.js");
js.then (js => {
  js.add_index ();
  js.add_index ();
  let id = js.get_index ();
  console.log ('id:', id);
  let id2 = js.get_index ();
  console.log ('id:', id2);
  const js2 = import (/ * webpackChunkName: "view_wasm_2" * / "../pkg/hello_wasm.js"); // hello_wasm2 also not useful
  js2.then (js => {
    js.add_index ();
    js.add_index ();
    let id = js.get_index ();
    console.log ('js2 id:', id);
    let id2 = js.get_index ();
    console.log ('js2 id:', id2);
  });
});

Я надеюсь, что js и js2 не будут влиять друг на друга. Они используют два экземпляра WebAssembly, каждый со своей собственной памятью. Но на самом деле они использовали один и тот же экземпляр WebAssembly (хотя я скопировал hello_wasm. js и изменил его имя). Я также посмотрел на сгенерированный код, главным образом потому, что при загрузке wasm использовался кеш:

wasmModules.forEach (function (wasmModuleId) {
/ ****** / var installedWasmModuleData = installedWasmModules [wasmModuleId];
/ ****** /
/ ****** / // a Promise means "currently loading" or "already loaded".
/ ****** / if (installedWasmModuleData)
/ ****** / promises.push (installedWasmModuleData);
/ ****** / else {
/ ****** / var importObject = wasmImportObjects [wasmModuleId] ();
/ ****** / var req = fetch (__ webpack_require __. p + "" + {"2": "795c98e4258ee4a1e670"} [wasmModuleId] + ".module.wasm");
/ ****** / var promise;
/ ****** / if (importObject instanceof Promise && typeof WebAssembly.compileStreaming === 'function') {
/ ****** / promise = Promise.all ([WebAssembly.compileStreaming (req), importObject]). then (function (items) {
/ ****** / return WebAssembly.instantiate (items [0], items [1]);
/ ****** /});
/ ****** /} else if (typeof WebAssembly.instantiateStreaming === 'function') {
/ ****** / promise = WebAssembly.instantiateStreaming (req, importObject);
/ ****** /} else {
/ ****** / var bytesPromise = req.then (function (x) {return x.arrayBuffer ();});
/ ****** / promise = bytesPromise.then (function (bytes) {
/ ****** / return WebAssembly.instantiate (bytes, importObject);
/ ****** /});
/ ****** /}
/ ****** / promises.push (installedWasmModules [wasmModuleId] = promise.then (function (res) {
/ ****** / return __webpack_require __. w [wasmModuleId] = (res.instance 
 res) .exports;
/ ****** /}));
/ ****** /}

Кроме того, даже если я изменю эту часть кода, механизм webpack_require будет иметь кеш, который не позволяет мне использовать два отдельных экземпляра.

Учитывая, что механизм загрузки здесь сложен, и я не должен изменять скомпилированный код веб-пакета. Я пока не знаю, как это сделать.

Я также подготовил демонстрационный исходный код: https://github.com/aircloud/hello-wasm2

Таким образом, моя апелляция заключается в том, что я могу иметь несколько экземпляры веб-сборки для файла wasm. Как я могу сделать это с текущим механизмом webpack?

Спасибо!

...