WasmChunkLoadingRuntimeModule.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494
  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 { fullHashPathData } = require("../wasm/wasmModuleFilename");
  10. const WebAssemblyUtils = require("./WebAssemblyUtils");
  11. /** @import { Signature } from "@webassemblyjs/ast" */
  12. /** @import Chunk from "../Chunk" */
  13. /** @import ChunkGraph, { ModuleId } from "../ChunkGraph" */
  14. /** @import Compilation from "../Compilation" */
  15. /** @import Module, { ReadOnlyRuntimeRequirements } from "../Module" */
  16. /** @import ModuleGraph from "../ModuleGraph" */
  17. /** @import { RuntimeSpec } from "../util/runtime" */
  18. // TODO webpack 6 remove the whole folder
  19. // Get all wasm modules
  20. /**
  21. * @param {ModuleGraph} moduleGraph the module graph
  22. * @param {ChunkGraph} chunkGraph the chunk graph
  23. * @param {Chunk} chunk the chunk
  24. * @returns {Module[]} all wasm modules
  25. */
  26. const getAllWasmModules = (moduleGraph, chunkGraph, chunk) => {
  27. const wasmModules = chunk.getAllAsyncChunks();
  28. /** @type {Module[]} */
  29. const array = [];
  30. for (const chunk of wasmModules) {
  31. for (const m of chunkGraph.getOrderedChunkModulesIterable(
  32. chunk,
  33. compareModulesByIdentifier
  34. )) {
  35. if (m.type.startsWith("webassembly")) {
  36. array.push(m);
  37. }
  38. }
  39. }
  40. return array;
  41. };
  42. /** @typedef {string[]} Declarations */
  43. /**
  44. * generates the import object function for a module
  45. * @param {ChunkGraph} chunkGraph the chunk graph
  46. * @param {Module} module the module
  47. * @param {boolean | undefined} mangle mangle imports
  48. * @param {Declarations} declarations array where declarations are pushed to
  49. * @param {RuntimeSpec} runtime the runtime
  50. * @returns {string} source code
  51. */
  52. const generateImportObject = (
  53. chunkGraph,
  54. module,
  55. mangle,
  56. declarations,
  57. runtime
  58. ) => {
  59. const moduleGraph = chunkGraph.moduleGraph;
  60. /** @type {Map<string, ModuleId>} */
  61. const waitForInstances = new Map();
  62. /** @type {{ module: string, name: string, value: string }[]} */
  63. const properties = [];
  64. const usedWasmDependencies = WebAssemblyUtils.getUsedDependencies(
  65. moduleGraph,
  66. module,
  67. mangle
  68. );
  69. for (const usedDep of usedWasmDependencies) {
  70. const dep = usedDep.dependency;
  71. const importedModule = moduleGraph.getModule(dep);
  72. const exportName = dep.name;
  73. const usedName =
  74. importedModule &&
  75. moduleGraph
  76. .getExportsInfo(importedModule)
  77. .getUsedName(exportName, runtime);
  78. const description = dep.description;
  79. const direct = dep.onlyDirectImport;
  80. const module = usedDep.module;
  81. const name = usedDep.name;
  82. if (direct) {
  83. const instanceVar = `m${waitForInstances.size}`;
  84. waitForInstances.set(
  85. instanceVar,
  86. /** @type {ModuleId} */
  87. (chunkGraph.getModuleId(/** @type {Module} */ (importedModule)))
  88. );
  89. properties.push({
  90. module,
  91. name,
  92. value: `${instanceVar}[${JSON.stringify(usedName)}]`
  93. });
  94. } else {
  95. const params =
  96. /** @type {Signature} */
  97. (description.signature).params.map(
  98. (param, k) => `p${k}${param.valtype}`
  99. );
  100. const mod = `${RuntimeGlobals.moduleCache}[${JSON.stringify(
  101. chunkGraph.getModuleId(/** @type {Module} */ (importedModule))
  102. )}]`;
  103. const modExports = `${mod}.exports`;
  104. const cache = `wasmImportedFuncCache${declarations.length}`;
  105. declarations.push(`var ${cache};`);
  106. const modCode =
  107. /** @type {Module} */
  108. (importedModule).type.startsWith("webassembly")
  109. ? `${mod} ? ${modExports}[${JSON.stringify(usedName)}] : `
  110. : "";
  111. properties.push({
  112. module,
  113. name,
  114. value: Template.asString([
  115. `${modCode}function(${params}) {`,
  116. Template.indent([
  117. `if(${cache} === undefined) ${cache} = ${modExports};`,
  118. `return ${cache}[${JSON.stringify(usedName)}](${params});`
  119. ]),
  120. "}"
  121. ])
  122. });
  123. }
  124. }
  125. /** @type {string[]} */
  126. let importObject;
  127. if (mangle) {
  128. importObject = [
  129. "return {",
  130. Template.indent([
  131. properties
  132. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  133. .join(",\n")
  134. ]),
  135. "};"
  136. ];
  137. } else {
  138. /** @type {Map<string, { name: string, value: string }[]>} */
  139. const propertiesByModule = new Map();
  140. for (const p of properties) {
  141. let list = propertiesByModule.get(p.module);
  142. if (list === undefined) {
  143. propertiesByModule.set(p.module, (list = []));
  144. }
  145. list.push(p);
  146. }
  147. importObject = [
  148. "return {",
  149. Template.indent([
  150. Array.from(propertiesByModule, ([module, list]) =>
  151. Template.asString([
  152. `${JSON.stringify(module)}: {`,
  153. Template.indent([
  154. list
  155. .map((p) => `${JSON.stringify(p.name)}: ${p.value}`)
  156. .join(",\n")
  157. ]),
  158. "}"
  159. ])
  160. ).join(",\n")
  161. ]),
  162. "};"
  163. ];
  164. }
  165. const moduleIdStringified = JSON.stringify(chunkGraph.getModuleId(module));
  166. if (waitForInstances.size === 1) {
  167. const moduleId = [...waitForInstances.values()][0];
  168. const promise = `installedWasmModules[${JSON.stringify(moduleId)}]`;
  169. const variable = [...waitForInstances.keys()][0];
  170. return Template.asString([
  171. `${moduleIdStringified}: function() {`,
  172. Template.indent([
  173. `return promiseResolve().then(function() { return ${promise}; }).then(function(${variable}) {`,
  174. Template.indent(importObject),
  175. "});"
  176. ]),
  177. "},"
  178. ]);
  179. } else if (waitForInstances.size > 0) {
  180. const promises = Array.from(
  181. waitForInstances.values(),
  182. (id) => `installedWasmModules[${JSON.stringify(id)}]`
  183. ).join(", ");
  184. const variables = Array.from(
  185. waitForInstances.keys(),
  186. (name, i) => `${name} = array[${i}]`
  187. ).join(", ");
  188. return Template.asString([
  189. `${moduleIdStringified}: function() {`,
  190. Template.indent([
  191. `return promiseResolve().then(function() { return Promise.all([${promises}]); }).then(function(array) {`,
  192. Template.indent([`var ${variables};`, ...importObject]),
  193. "});"
  194. ]),
  195. "},"
  196. ]);
  197. }
  198. return Template.asString([
  199. `${moduleIdStringified}: function() {`,
  200. Template.indent(importObject),
  201. "},"
  202. ]);
  203. };
  204. /**
  205. * @typedef {object} WasmChunkLoadingRuntimeModuleOptions
  206. * @property {(path: string) => string} generateLoadBinaryCode
  207. * @property {boolean=} supportsStreaming
  208. * @property {boolean=} mangleImports
  209. * @property {ReadOnlyRuntimeRequirements} runtimeRequirements
  210. * @property {boolean=} fullHashDigest the binary's name inlines a re-encoded compilation hash
  211. */
  212. class WasmChunkLoadingRuntimeModule extends RuntimeModule {
  213. /**
  214. * @param {WasmChunkLoadingRuntimeModuleOptions} options options
  215. */
  216. constructor({
  217. generateLoadBinaryCode,
  218. supportsStreaming,
  219. mangleImports,
  220. runtimeRequirements,
  221. fullHashDigest
  222. }) {
  223. super("wasm chunk loading", RuntimeModule.STAGE_ATTACH);
  224. // A re-encoded digest is inlined from the settled hash, so this has to render
  225. // again once there is one.
  226. if (fullHashDigest) {
  227. /** @type {boolean} */
  228. this.fullHash = true;
  229. }
  230. this.generateLoadBinaryCode = generateLoadBinaryCode;
  231. /** @type {boolean | undefined} */
  232. this.supportsStreaming = supportsStreaming;
  233. /** @type {boolean | undefined} */
  234. this.mangleImports = mangleImports;
  235. /** @type {ReadOnlyRuntimeRequirements} */
  236. this._runtimeRequirements = runtimeRequirements;
  237. }
  238. /**
  239. * Generates runtime code for this runtime module.
  240. * @returns {string | null} runtime code
  241. */
  242. generate() {
  243. const fn = RuntimeGlobals.ensureChunkHandlers;
  244. const withHmr = this._runtimeRequirements.has(
  245. RuntimeGlobals.hmrDownloadUpdateHandlers
  246. );
  247. const compilation = /** @type {Compilation} */ (this.compilation);
  248. const { moduleGraph, outputOptions, runtimeTemplate } = compilation;
  249. const chunkGraph = /** @type {ChunkGraph} */ (this.chunkGraph);
  250. const chunk = /** @type {Chunk} */ (this.chunk);
  251. const wasmModules = getAllWasmModules(moduleGraph, chunkGraph, chunk);
  252. const { mangleImports } = this;
  253. /** @type {Declarations} */
  254. const declarations = [];
  255. const importObjects = wasmModules.map((module) =>
  256. generateImportObject(
  257. chunkGraph,
  258. module,
  259. mangleImports,
  260. declarations,
  261. chunk.runtime
  262. )
  263. );
  264. const chunkModuleIdMap = chunkGraph.getChunkModuleIdMap(chunk, (m) =>
  265. m.type.startsWith("webassembly")
  266. );
  267. /**
  268. * @param {string} content content
  269. * @returns {string} created import object
  270. */
  271. const createImportObject = (content) =>
  272. mangleImports
  273. ? `{ ${JSON.stringify(WebAssemblyUtils.MANGLED_MODULE)}: ${content} }`
  274. : content;
  275. // Opt-in fallback to non-streaming when the server serves wasm with a wrong MIME type.
  276. const streamingFallback = outputOptions.wasmStreamingFallback;
  277. const streamingMimeFallbackWarning =
  278. 'console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\\n", e);';
  279. const wasmModuleSrcPath = compilation.getPath(
  280. JSON.stringify(outputOptions.webassemblyModuleFilename),
  281. {
  282. ...fullHashPathData(compilation),
  283. module: {
  284. id: '" + wasmModuleId + "',
  285. hash: `" + ${JSON.stringify(
  286. chunkGraph.getChunkModuleRenderedHashMap(chunk, (m) =>
  287. m.type.startsWith("webassembly")
  288. )
  289. )}[chunkId][wasmModuleId] + "`,
  290. hashWithLength(length) {
  291. return `" + ${JSON.stringify(
  292. chunkGraph.getChunkModuleRenderedHashMap(
  293. chunk,
  294. (m) => m.type.startsWith("webassembly"),
  295. length
  296. )
  297. )}[chunkId][wasmModuleId] + "`;
  298. }
  299. },
  300. runtime: chunk.runtime
  301. }
  302. );
  303. const stateExpression = withHmr
  304. ? `${RuntimeGlobals.hmrRuntimeStatePrefix}_wasm`
  305. : undefined;
  306. return Template.asString([
  307. "// object to store loaded and loading wasm modules",
  308. `var installedWasmModules = ${
  309. stateExpression ? runtimeTemplate.assignOr(stateExpression, "{}") : "{}"
  310. };`,
  311. "",
  312. // This function is used to delay reading the installed wasm module promises
  313. // by a microtask. Sorting them doesn't help because there are edge cases where
  314. // sorting is not possible (modules splitted into different chunks).
  315. // So we not even trying and solve this by a microtask delay.
  316. "function promiseResolve() { return Promise.resolve(); }",
  317. "",
  318. Template.asString(declarations),
  319. "var wasmImportObjects = {",
  320. Template.indent(importObjects),
  321. "};",
  322. "",
  323. `var wasmModuleMap = ${JSON.stringify(
  324. chunkModuleIdMap,
  325. undefined,
  326. "\t"
  327. )};`,
  328. "",
  329. "// object with all WebAssembly.instance exports",
  330. `${RuntimeGlobals.wasmInstances} = {};`,
  331. "",
  332. "// Fetch + compile chunk loading for webassembly",
  333. `${fn}.wasm = function(chunkId, promises) {`,
  334. Template.indent([
  335. "",
  336. "var wasmModules = wasmModuleMap[chunkId] || [];",
  337. "",
  338. "wasmModules.forEach(function(wasmModuleId, idx) {",
  339. Template.indent([
  340. "var installedWasmModuleData = installedWasmModules[wasmModuleId];",
  341. "",
  342. '// a Promise means "currently loading" or "already loaded".',
  343. "if(installedWasmModuleData)",
  344. Template.indent(["promises.push(installedWasmModuleData);"]),
  345. "else {",
  346. Template.indent([
  347. "var importObject = wasmImportObjects[wasmModuleId]();",
  348. `var req = ${this.generateLoadBinaryCode(wasmModuleSrcPath)};`,
  349. "var promise;",
  350. this.supportsStreaming
  351. ? streamingFallback
  352. ? Template.asString([
  353. "if(importObject && typeof importObject.then === 'function' && typeof WebAssembly.compileStreaming === 'function') {",
  354. Template.indent([
  355. "promise = req.then(function(res) {",
  356. Template.indent([
  357. "return Promise.all([WebAssembly.compileStreaming(res), importObject]).then(function(items) {",
  358. Template.indent([
  359. `return WebAssembly.instantiate(items[0], ${createImportObject(
  360. "items[1]"
  361. )});`
  362. ]),
  363. "}, function(e) {",
  364. Template.indent([
  365. 'if(res.headers.get("Content-Type") !== "application/wasm") {',
  366. Template.indent([
  367. streamingMimeFallbackWarning,
  368. "return Promise.all([res.arrayBuffer().then(function(bytes) { return WebAssembly.compile(bytes); }), importObject]).then(function(items) {",
  369. Template.indent([
  370. `return WebAssembly.instantiate(items[0], ${createImportObject(
  371. "items[1]"
  372. )});`
  373. ]),
  374. "});"
  375. ]),
  376. "}",
  377. "throw e;"
  378. ]),
  379. "});"
  380. ]),
  381. "});"
  382. ]),
  383. "} else if(typeof WebAssembly.instantiateStreaming === 'function') {",
  384. Template.indent([
  385. "promise = req.then(function(res) {",
  386. Template.indent([
  387. `return WebAssembly.instantiateStreaming(res, ${createImportObject(
  388. "importObject"
  389. )}).then(undefined, function(e) {`,
  390. Template.indent([
  391. 'if(res.headers.get("Content-Type") !== "application/wasm") {',
  392. Template.indent([
  393. streamingMimeFallbackWarning,
  394. "return res.arrayBuffer().then(function(bytes) {",
  395. Template.indent([
  396. `return WebAssembly.instantiate(bytes, ${createImportObject(
  397. "importObject"
  398. )});`
  399. ]),
  400. "});"
  401. ]),
  402. "}",
  403. "throw e;"
  404. ]),
  405. "});"
  406. ]),
  407. "});"
  408. ])
  409. ])
  410. : Template.asString([
  411. "if(importObject && typeof importObject.then === 'function' && typeof WebAssembly.compileStreaming === 'function') {",
  412. Template.indent([
  413. "promise = Promise.all([WebAssembly.compileStreaming(req), importObject]).then(function(items) {",
  414. Template.indent([
  415. `return WebAssembly.instantiate(items[0], ${createImportObject(
  416. "items[1]"
  417. )});`
  418. ]),
  419. "});"
  420. ]),
  421. "} else if(typeof WebAssembly.instantiateStreaming === 'function') {",
  422. Template.indent([
  423. `promise = WebAssembly.instantiateStreaming(req, ${createImportObject(
  424. "importObject"
  425. )});`
  426. ])
  427. ])
  428. : Template.asString([
  429. "if(importObject && typeof importObject.then === 'function') {",
  430. Template.indent([
  431. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  432. "promise = Promise.all([",
  433. Template.indent([
  434. "bytesPromise.then(function(bytes) { return WebAssembly.compile(bytes); }),",
  435. "importObject"
  436. ]),
  437. "]).then(function(items) {",
  438. Template.indent([
  439. `return WebAssembly.instantiate(items[0], ${createImportObject(
  440. "items[1]"
  441. )});`
  442. ]),
  443. "});"
  444. ])
  445. ]),
  446. "} else {",
  447. Template.indent([
  448. "var bytesPromise = req.then(function(x) { return x.arrayBuffer(); });",
  449. "promise = bytesPromise.then(function(bytes) {",
  450. Template.indent([
  451. `return WebAssembly.instantiate(bytes, ${createImportObject(
  452. "importObject"
  453. )});`
  454. ]),
  455. "});"
  456. ]),
  457. "}",
  458. "promises.push(installedWasmModules[wasmModuleId] = promise.then(function(res) {",
  459. Template.indent([
  460. `return ${RuntimeGlobals.wasmInstances}[wasmModuleId] = (res.instance || res).exports;`
  461. ]),
  462. "}));"
  463. ]),
  464. "}"
  465. ]),
  466. "});"
  467. ]),
  468. "};"
  469. ]);
  470. }
  471. }
  472. module.exports = WasmChunkLoadingRuntimeModule;