Support for WebAssembly (wasm) modules

[stefan2718]

I'm working on a package that uses WebAssembly, here: https://www.npmjs.com/package/wasm-marker-clusterer

Currently, .wasm files need to be loaded asynchronously, making it difficult to package them in the standard way that webpack would.

This is the build error message that comes up when I try to analyze my package:

/tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer_bg.wasm
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* /tmp/tmp-build/packages/[email protected]/index.js 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/dist/index.js 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer.js 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer_bg.wasm
* ... --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer.js 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer_bg.wasm 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer.js 
  --> /tmp/tmp-build/packages/[email protected]/node_modules/wasm-marker-clusterer/pkg/webassembly_marker_clusterer_bg.wasm

I think Wasm modules on NPM will be more and more popular as the technology spreads, and it would be awesome to be able to analyze them with this tool.

If you think this is worthwhile, I'd be interested in putting a PR together.

[pastelsky]

@stefan2718 I'd love to add support for WASM modules in bundlephobia. A few questions for you –

1. Does the current way of displaying sizes for JS modules work well for WASM modules as well? I reckon the total size still might, but what about composition and exports analysis (I'm guessing not?)

2. How costly (in terms of CPU) is compiling WASM modules? Do we want to support packages that ship with (.wasm) or even the ones that ship with non-compiled source?

I haven't had a chance to look too deeply into WASM, excuse my ignorance here. If you need a starting point or help navigating code, let me know.

[stefan2718]

To use my package as an example, the entrypoint for it is a javascript file (index.js) that imports my wasm module/file and wraps some of the functionality, for example:

import * as clusterer from 'path/clusterer.wasm';
clusterer.callWasmMethod();

So a simple way to include the size would be to just get the filesize of any imported .wasm files. I don't think that wasm modules can import other wasm modules, so for composition and exports, it would just be checking what javascript files import any wasm modules. It's also possible for an npm package to only include a .wasm file, to be used in other js packages.

It doesn't seem reasonable to support non-compiled wasm, as wasm can be compiled from many vastly different languages.

Since you're using webpack here (and that's what's causing the error in my initial post), the fix will likely be modifying the webpack config to handle .wasm files in a special way.

I can look into this and make a PR. Hopefully it's as simple as changing the webpack config, but it might not be.