├── README.md
├── add.wasm
├── build.js
├── example.js
├── factorial.wasm
├── fibonacci.wasm
├── index.html
├── js
├── 0.output.js
├── 1.output.js
├── 1d2268b99656e9575a63.wasm
├── 3d28950d91bc7246f5af.wasm
├── 80925f35a6f1cf550d38.wasm
└── output.js
├── math.js
├── template.md
└── webpack.config.js
/README.md:
--------------------------------------------------------------------------------
1 | This very simple example shows usage of WebAssembly.
2 |
3 | WebAssembly modules can be imported like other modules. Their download and compilation happens in parallel to the download and evaluation of the javascript chunk.
4 |
5 | # example.js
6 |
7 | ``` javascript
8 | import("./add.wasm").then(addModule => {
9 | console.log(addModule.add(22, 2200));
10 | import("./math").then(math => {
11 | console.log(math.add(10, 101));
12 | console.log(math.factorial(15));
13 | console.log(math.factorialJavascript(15));
14 | console.log(math.fibonacci(15));
15 | console.log(math.fibonacciJavascript(15));
16 | timed("wasm factorial", () => math.factorial(1500));
17 | timed("js factorial", () => math.factorialJavascript(1500));
18 | timed("wasm fibonacci", () => math.fibonacci(22));
19 | timed("js fibonacci", () => math.fibonacciJavascript(22));
20 | });
21 | });
22 |
23 | function timed(name, fn) {
24 | if(!console.time || !console.timeEnd)
25 | return fn();
26 | // warmup
27 | for(var i = 0; i < 10; i++)
28 | fn();
29 | console.time(name)
30 | for(var i = 0; i < 5000; i++)
31 | fn();
32 | console.timeEnd(name)
33 | }
34 | ```
35 |
36 | # math.js
37 |
38 | ``` javascript
39 | import { add } from "./add.wasm";
40 | import { factorial } from "./factorial.wasm";
41 | import { fibonacci } from "./fibonacci.wasm";
42 |
43 | export { add, factorial, fibonacci };
44 |
45 | export function factorialJavascript(i) {
46 | if(i < 1) return 1;
47 | return i * factorialJavascript(i - 1);
48 | }
49 |
50 | export function fibonacciJavascript(i) {
51 | if(i < 2) return 1;
52 | return fibonacciJavascript(i - 1) + fibonacciJavascript(i - 2);
53 | }
54 | ```
55 |
56 | # js/output.js
57 |
58 | /******/ (function(modules) { /* webpackBootstrap */ })
59 |
60 | ``` javascript
61 | /******/ (function(modules) { // webpackBootstrap
62 | /******/ // install a JSONP callback for chunk loading
63 | /******/ function webpackJsonpCallback(data) {
64 | /******/ var chunkIds = data[0], moreModules = data[1], executeModules = data[2];
65 | /******/ // add "moreModules" to the modules object,
66 | /******/ // then flag all "chunkIds" as loaded and fire callback
67 | /******/ var moduleId, chunkId, i = 0, resolves = [], result;
68 | /******/ for(;i < chunkIds.length; i++) {
69 | /******/ chunkId = chunkIds[i];
70 | /******/ if(installedChunks[chunkId]) {
71 | /******/ resolves.push(installedChunks[chunkId][0]);
72 | /******/ }
73 | /******/ installedChunks[chunkId] = 0;
74 | /******/ }
75 | /******/ for(moduleId in moreModules) {
76 | /******/ if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
77 | /******/ modules[moduleId] = moreModules[moduleId];
78 | /******/ }
79 | /******/ }
80 | /******/ if(parentJsonpFunction) parentJsonpFunction(data);
81 | /******/ while(resolves.length) {
82 | /******/ resolves.shift()();
83 | /******/ }
84 | /******/
85 | /******/ };
86 | /******/
87 | /******/ // The module cache
88 | /******/ var installedModules = {};
89 | /******/
90 | /******/ // object to store loaded and loading chunks
91 | /******/ var installedChunks = {
92 | /******/ 2: 0
93 | /******/ };
94 | /******/
95 | /******/ var scheduledModules = [];
96 | /******/
97 | /******/ // object to store loaded and loading wasm modules
98 | /******/ var installedWasmModules = {};
99 | /******/
100 | /******/ // The require function
101 | /******/ function __webpack_require__(moduleId) {
102 | /******/
103 | /******/ // Check if module is in cache
104 | /******/ if(installedModules[moduleId]) {
105 | /******/ return installedModules[moduleId].exports;
106 | /******/ }
107 | /******/ // Create a new module (and put it into the cache)
108 | /******/ var module = installedModules[moduleId] = {
109 | /******/ i: moduleId,
110 | /******/ l: false,
111 | /******/ exports: {}
112 | /******/ };
113 | /******/
114 | /******/ // Execute the module function
115 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
116 | /******/
117 | /******/ // Flag the module as loaded
118 | /******/ module.l = true;
119 | /******/
120 | /******/ // Return the exports of the module
121 | /******/ return module.exports;
122 | /******/ }
123 | /******/
124 | /******/ // This file contains only the entry chunk.
125 | /******/ // The chunk loading function for additional chunks
126 | /******/ __webpack_require__.e = function requireEnsure(chunkId) {
127 | /******/ var promises = [];
128 | /******/
129 | /******/
130 | /******/ // JSONP chunk loading for javascript
131 | /******/
132 | /******/ var installedChunkData = installedChunks[chunkId];
133 | /******/ if(installedChunkData !== 0) { // 0 means "already installed".
134 | /******/
135 | /******/ // a Promise means "currently loading".
136 | /******/ if(installedChunkData) {
137 | /******/ promises.push(installedChunkData[2]);
138 | /******/ } else {
139 | /******/ // setup Promise in chunk cache
140 | /******/ var promise = new Promise(function(resolve, reject) {
141 | /******/ installedChunkData = installedChunks[chunkId] = [resolve, reject];
142 | /******/ installedChunkData[2] = promise;
143 | /******/ });
144 | /******/
145 | /******/ // start chunk loading
146 | /******/ var head = document.getElementsByTagName('head')[0];
147 | /******/ var script = document.createElement('script');
148 | /******/ script.charset = 'utf-8';
149 | /******/ script.timeout = 120000;
150 | /******/
151 | /******/ if (__webpack_require__.nc) {
152 | /******/ script.setAttribute("nonce", __webpack_require__.nc);
153 | /******/ }
154 | /******/ script.src = __webpack_require__.p + "" + chunkId + ".output.js";
155 | /******/ var timeout = setTimeout(function(){
156 | /******/ onScriptComplete({ type: 'timeout', target: script });
157 | /******/ }, 120000);
158 | /******/ script.onerror = script.onload = onScriptComplete;
159 | /******/ function onScriptComplete(event) {
160 | /******/ // avoid mem leaks in IE.
161 | /******/ script.onerror = script.onload = null;
162 | /******/ clearTimeout(timeout);
163 | /******/ var chunk = installedChunks[chunkId];
164 | /******/ if(chunk !== 0) {
165 | /******/ if(chunk) {
166 | /******/ var errorType = event && (event.type === 'load' ? 'missing' : event.type);
167 | /******/ var realSrc = event && event.target && event.target.src;
168 | /******/ var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
169 | /******/ error.type = errorType;
170 | /******/ error.request = realSrc;
171 | /******/ chunk[1](error);
172 | /******/ }
173 | /******/ installedChunks[chunkId] = undefined;
174 | /******/ }
175 | /******/ };
176 | /******/ head.appendChild(script);
177 | /******/ promises.push(promise);
178 | /******/ }
179 | /******/ }
180 | /******/
181 | /******/ // Fetch + compile chunk loading for webassembly
182 | /******/
183 | /******/ var wasmModules = {"0":[1,3,4],"1":[1]}[chunkId] || [];
184 | /******/
185 | /******/ wasmModules.forEach(function(wasmModuleId) {
186 | /******/ var installedWasmModuleData = installedWasmModules[wasmModuleId];
187 | /******/
188 | /******/ // a Promise means "currently loading" or "already loaded".
189 | /******/ if(installedWasmModuleData) {
190 | /******/ promises.push(installedWasmModuleData);
191 | /******/ } else {
192 | /******/ var promise = installedWasmModules[wasmModuleId] = fetch(__webpack_require__.p + "" + {"1":"80925f35a6f1cf550d38","3":"3d28950d91bc7246f5af","4":"1d2268b99656e9575a63"}[wasmModuleId] + ".wasm")
193 | /******/ .then(function(response) { return response.arrayBuffer(); })
194 | /******/ .then(function(bytes) { return WebAssembly.compile(bytes); })
195 | /******/ .then(function(module) { __webpack_require__.w[wasmModuleId] = module; })
196 | /******/ promises.push(promise);
197 | /******/ }
198 | /******/ });
199 | /******/ return Promise.all(promises);
200 | /******/ };
201 | /******/
202 | /******/ // expose the modules object (__webpack_modules__)
203 | /******/ __webpack_require__.m = modules;
204 | /******/
205 | /******/ // expose the module cache
206 | /******/ __webpack_require__.c = installedModules;
207 | /******/
208 | /******/ // define getter function for harmony exports
209 | /******/ __webpack_require__.d = function(exports, name, getter) {
210 | /******/ if(!__webpack_require__.o(exports, name)) {
211 | /******/ Object.defineProperty(exports, name, {
212 | /******/ configurable: false,
213 | /******/ enumerable: true,
214 | /******/ get: getter
215 | /******/ });
216 | /******/ }
217 | /******/ };
218 | /******/
219 | /******/ // getDefaultExport function for compatibility with non-harmony modules
220 | /******/ __webpack_require__.n = function(module) {
221 | /******/ var getter = module && module.__esModule ?
222 | /******/ function getDefault() { return module['default']; } :
223 | /******/ function getModuleExports() { return module; };
224 | /******/ __webpack_require__.d(getter, 'a', getter);
225 | /******/ return getter;
226 | /******/ };
227 | /******/
228 | /******/ // Object.prototype.hasOwnProperty.call
229 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
230 | /******/
231 | /******/ // __webpack_public_path__
232 | /******/ __webpack_require__.p = "js/";
233 | /******/
234 | /******/ // on error function for async loading
235 | /******/ __webpack_require__.oe = function(err) { console.error(err); throw err; };
236 | /******/
237 | /******/ // object with all compiled WebAssmbly.Modules
238 | /******/ __webpack_require__.w = {};
239 | /******/
240 | /******/ var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
241 | /******/ var parentJsonpFunction = jsonpArray.push.bind(jsonpArray);
242 | /******/ jsonpArray.push = webpackJsonpCallback;
243 | /******/ jsonpArray = jsonpArray.slice();
244 | /******/ for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
245 | /******/
246 | /******/ // Load entry module and return exports
247 | /******/ return __webpack_require__(__webpack_require__.s = 0);
248 | /******/ })
249 | /************************************************************************/
250 | ```
251 |
252 |