WasmChunkLoadingRuntimeModule.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. /*
  2. MIT License http://www.opensource.org/licenses/mit-license.php
  3. */
  4. "use strict";
  5. const RuntimeGlobals = require("../RuntimeGlobals");
  6. const RuntimeModule = require("../RuntimeModule");
  7. const Template = require("../Template");
  8. const { compareModulesByIdentifier } = require("../util/comparators");
  9. const WebAssemblyUtils = require("./WebAssemblyUtils");
  10. /** @typedef {import("../ChunkGraph")} ChunkGraph */
  11. /** @typedef {import("../Compilation")} Compilation */
  12. /** @typedef {import("../Module")} Module */
  13. /** @typedef {import("../util/runtime").RuntimeSpec} RuntimeSpec */
  14. // TODO webpack 6 remove the whole folder
  15. // Get all wasm modules
  16. const getAllWasmModules = (moduleGraph, chunkGraph, chunk) => {
  17. const wasmModules = chunk.getAllAsyncChunks();
  18. const array = [];
  19. for (const chunk of wasmModules) {
  20. for (const m of chunkGraph.getOrderedChunkModulesIterable(
  21. chunk,
  22. compareModulesByIdentifier
  23. )) {
  24. if (m.type.startsWith("webassembly")) {
  25. array.push(m);
  26. }
  27. }
  28. }
  29. return array;
  30. };
  31. /**
  32. * generates the import object function for a module
  33. * @param {ChunkGraph} chunkGraph the chunk graph
  34. * @param {Module} module the module
  35. * @param {boolean} mangle mangle imports
  36. * @param {string[]} declarations array where declarations are pushed to
  37. * @param {RuntimeSpec} runtime the runtime
  38. * @returns {string} source code
  39. */
  40. const generateImportObject = (
  41. chunkGraph,
  42. module,
  43. mangle,
  44. declarations,
  45. runtime
  46. ) => {
  47. const moduleGraph = chunkGraph.moduleGraph;
  48. const waitForInstances = new Map();
  49. const properties = [];
  50. const usedWasmDependencies = WebAssemblyUtils.getUsedDependencies(
  51. moduleGraph,
  52. module,
  53. mangle
  54. );
  55. for (const usedDep of usedWasmDependencies) {
  56. const dep = usedDep.dependency;
  57. const importedModule = moduleGraph.getModule(dep);
  58. const exportName = dep.name;
  59. const usedName =
  60. importedModule &&
  61. moduleGraph
  62. .getExportsInfo(importedModule)
  63. .getUsedName(exportName, runtime);
  64. const description = dep.description;
  65. const direct = dep.onlyDirectImport;
  66. const module = usedDep.module;
  67. const name = usedDep.name;
  68. if (direct) {
  69. const instanceVar = `m${waitForInstances.size}`;
  70. waitForInstances.set(instanceVar, chunkGraph.getModuleId(importedModule));
  71. properties.push({
  72. module,
  73. name,
  74. value: `${instanceVar}[${JSON.stringify(usedName)}]`
  75. });
  76. } else {
  77. const params = description.signature.params.map(
  78. (param, k) => "p" + k + param.valtype
  79. );
  80. const mod = `${RuntimeGlobals.moduleCache}[${JSON.stringify(
  81. chunkGraph.getModuleId(importedModule)
  82. )}]`;
  83. const modExports = `${mod}.exports`;
  84. const cache = `wasmImportedFuncCache${declarations.length}`;
  85. declarations.push(`var ${cache};`);
  86. properties.push({
  87. module,
  88. name,
  89. value: Template.asString([
  90. (importedModule.type.startsWith("webassembly")
  91. ? `${mod} ? ${modExports}[${JSON.stringify(usedName)}] : `
  92. : "") + `function(${params}) {`,
  93. Template.indent([
  94. `if(${cache} === undefined) ${cache} = ${modExports};`,
  95. `return ${cache}[${JSON.stringify(usedName)}](${params});`
  96. ]),
  97. "}"
  98. ])
  99. });
  100. }
  101. }
  102. let importObject;
  103. if (mangle) {
  104. importObject = [
  105. "return {",
  106. Template.indent([
  107. properties.map(p => `${JSON.stringify(p.name)}: ${p.value}`).join(",\n")
  108. ]),
  109. "};"
  110. ];
  111. } else {
  112. const propertiesByModule = new Map();
  113. for (const p of properties) {
  114. let list = propertiesByModule.get(p.module);
  115. if (list === undefined) {
  116. propertiesByModule.set(p.module, (list = []));
  117. }
  118. list.push(p);
  119. }
  120. importObject = [
  121. "return {",
  122. Template.indent([
  123. Array.from(propertiesByModule, ([module, list]) => {
  124. return Template.asString([
  125. `${JSON.stringify(module)}: {`,
  126. Template.indent([
  127. list.map(p => `${JSON.stringify(p.name)}: ${p.value}`).join(",\n")
  128. ]),
  129. "}"
  130. ]);
  131. }).join(",\n")
  132. ]),
  133. "};"
  134. ];
  135. }
  136. const moduleIdStringified = JSON.stringify(chunkGraph.getModuleId(module));
  137. if (waitForInstances.size === 1) {
  138. const moduleId = Array.from(waitForInstances.values())[0];
  139. const promise = `installedWasmModules[${JSON.stringify(moduleId)}]`;
  140. const variable = Array.from(waitForInstances.keys())[0];
  141. return Template.asString([
  142. `${moduleIdStringified}: function() {`,
  143. Template.indent([
  144. `return promiseResolve().then(function() { return ${promise}; }).then(function(${variable}) {`,
  145. Template.indent(importObject),
  146. "});"
  147. ]),
  148. "},"
  149. ]);
  150. } else if (waitForInstances.size > 0) {
  151. const promises = Array.from(
  152. waitForInstances.values(),
  153. id => `installedWasmModules[${JSON.stringify(id)}]`
  154. ).join(", ");
  155. const variables = Array.from(
  156. waitForInstances.keys(),
  157. (name, i) => `${name} = array[${i}]`
  158. ).join(", ");
  159. return Template.asString([
  160. `${moduleIdStringified}: function() {`,
  161. Template.indent([
  162. `return promiseResolve().then(function() { return Promise.all([${promises}]); }).then(function(array) {`,
  163. Template.indent([`var ${variables};`, ...importObject]),
  164. "});"
  165. ]),
  166. "},"
  167. ]);
  168. } else {
  169. return Template.asString([
  170. `${moduleIdStringified}: function() {`,
  171. Template.indent(importObject),
  172. "},"
  173. ]);
  174. }
  175. };
  176. class WasmChunkLoadingRuntimeModule extends RuntimeModule {
  177. constructor({
  178. generateLoadBinaryCode,
  179. supportsStreaming,
  180. mangleImports,
  181. runtimeRequirements
  182. }) {
  183. super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
  184. this.generateLoadBinaryCode = generateLoadBinaryCode;
  185. this.supportsStreaming = supportsStreaming;
  186. this.mangleImports = mangleImports;
  187. this._runtimeRequirements = runtimeRequirements;
  188. }
  189. /**
  190. * @returns {string} runtime code
  191. */
  192. generate() {
  193. const { chunkGraph, compilation, chunk, mangleImports } = this;
  194. const { moduleGraph, outputOptions } = compilation;
  195. const fn = RuntimeGlobals.ensureChunkHandlers;
  196. const withHmr = this._runtimeRequirements.has(
  197. RuntimeGlobals.hmrDownloadUpdateHandlers
  198. );
  199. const wasmModules = getAllWasmModules(moduleGraph, chunkGraph, chunk);
  200. const declarations = [];
  201. const importObjects = wasmModules.map(module => {
  202. return generateImportObject(
  203. chunkGraph,
  204. module,
  205. this.mangleImports,
  206. declarations,
  207. chunk.runtime
  208. );
  209. });
  210. const chunkModuleIdMap = chunkGraph.getChunkModuleIdMap(chunk, m =>
  211. m.type.startsWith("webassembly")
  212. );
  213. const createImportObject = content =>
  214. mangleImports
  215. ? `{ ${JSON.stringify(WebAssemblyUtils.MANGLED_MODULE)}: ${content} }`
  216. : content;
  217. const wasmModuleSrcPath = compilation.getPath(
  218. JSON.stringify(outputOptions.webassemblyModuleFilename),
  219. {
  220. hash: `" + ${RuntimeGlobals.getFullHash}() + "`,
  221. hashWithLength: length =>
  222. `" + ${RuntimeGlobals.getFullHash}}().slice(0, ${length}) + "`,
  223. module: {
  224. id: '" + wasmModuleId + "',
  225. hash: `" + ${JSON.stringify(
  226. chunkGraph.getChunkModuleRenderedHashMap(chunk, m =>
  227. m.type.startsWith("webassembly")
  228. )
  229. )}[chunkId][wasmModuleId] + "`,
  230. hashWithLength(length) {
  231. return `" + ${JSON.stringify(
  232. chunkGraph.getChunkModuleRenderedHashMap(
  233. chunk,
  234. m => m.type.startsWith("webassembly"),
  235. length
  236. )
  237. )}[chunkId][wasmModuleId] + "`;
  238. }
  239. },
  240. runtime: chunk.runtime
  241. }
  242. );
  243. const stateExpression = withHmr
  244. ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_wasm`
  245. : undefined;
  246. return Template.asString([
  247. "// object to store loaded and loading wasm modules",
  248. `var installedWasmModules = ${
  249. stateExpression ? `${stateExpression} = ${stateExpression} || ` : ""
  250. }{};`,
  251. "",
  252. // This function is used to delay reading the installed wasm module promises
  253. // by a microtask. Sorting them doesn't help because there are edge cases where
  254. // sorting is not possible (modules splitted into different chunks).
  255. // So we not even trying and solve this by a microtask delay.
  256. "function promiseResolve() { return Promise.resolve(); }",
  257. "",
  258. Template.asString(declarations),
  259. "var wasmImportObjects = {",
  260. Template.indent(importObjects),
  261. "};",
  262. "",
  263. `var wasmModuleMap = ${JSON.stringify(
  264. chunkModuleIdMap,
  265. undefined,
  266. "\t"
  267. )};`,
  268. "",
  269. "// object with all WebAssembly.instance exports",
  270. `${RuntimeGlobals.wasmInstances} = {};`,
  271. "",
  272. "// Fetch + compile chunk loading for webassembly",
  273. `${fn}.wasm = function(chunkId, promises) {`,
  274. Template.indent([
  275. "",
  276. `var wasmModules = wasmModuleMap[chunkId] || [];`,
  277. "",
  278. "wasmModules.forEach(function(wasmModuleId, idx) {",
  279. Template.indent([
  280. "var installedWasmModuleData = installedWasmModules[wasmModuleId];",
  281. "",
  282. '// a Promise means "currently loading" or "already loaded".',
  283. "if(installedWasmModuleData)",
  284. Template.indent(["promises.push(installedWasmModuleData);"]),
  285. "else {",
  286. Template.indent([
  287. `var importObject = wasmImportObjects[wasmModuleId]();`,
  288. `var req = ${this.generateLoadBinaryCode(wasmModuleSrcPath)};`,
  289. "var promise;",
  290. this.supportsStreaming
  291. ? Template.asString([
  292. "if(importObject && typeof importObject.then === 'function' && typeof WebAssembly.compileStreaming === 'function') {",
  293. Template.indent([
  294. "promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {",
  295. Template.indent([
  296. `return WebAssembly.instantiate(items[0], ${createImportObject(
  297. "items[1]"
  298. )});`
  299. ]),
  300. "});"
  301. ]),
  302. "} else if(typeof WebAssembly.instantiateStreaming === 'function') {",
  303. Template.indent([
  304. `promise = WebAssembly.instantiateStreaming(req, ${createImportObject(
  305. "importObject"
  306. )});`
  307. ])
  308. ])
  309. : Template.asString([
  310. "if(importObject && typeof importObject.then === 'function') {",
  311. Template.indent([
  312. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  313. "promise = Promise.all([",
  314. Template.indent([
  315. "bytesPromise.then(function(bytes) { return WebAssembly.compile(bytes); }),",
  316. "importObject"
  317. ]),
  318. "]).then(function(items) {",
  319. Template.indent([
  320. `return WebAssembly.instantiate(items[0], ${createImportObject(
  321. "items[1]"
  322. )});`
  323. ]),
  324. "});"
  325. ])
  326. ]),
  327. "} else {",
  328. Template.indent([
  329. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  330. "promise = bytesPromise.then(function(bytes) {",
  331. Template.indent([
  332. `return WebAssembly.instantiate(bytes, ${createImportObject(
  333. "importObject"
  334. )});`
  335. ]),
  336. "});"
  337. ]),
  338. "}",
  339. "promises.push(installedWasmModules[wasmModuleId] = promise.then(function(res) {",
  340. Template.indent([
  341. `return ${RuntimeGlobals.wasmInstances}[wasmModuleId] = (res.instance || res).exports;`
  342. ]),
  343. "}));"
  344. ]),
  345. "}"
  346. ]),
  347. "});"
  348. ]),
  349. "};"
  350. ]);
  351. }
  352. }
  353. module.exports = WasmChunkLoadingRuntimeModule;