@@ -500,7 +500,8 @@ const module = await import(`./dir/${file}.js`)
500500
501501## WebAssembly {#webassembly}
502502
503- 预编译的 ` .wasm ` 文件可以通过 ` ?init ` 来导入。默认导出一个初始化函数，返回值为所导出 wasm 实例对象的 Promise：
503+ 预编译的 ` .wasm ` 文件可以通过 ` ?init ` 来导入。
504+ 默认导出一个初始化函数，返回值为所导出 [ ` WebAssembly.Instance ` ] ( https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Instance ) 实例对象的 Promise：
504505
505506``` js
506507import init from ' ./example.wasm?init'
@@ -510,7 +511,7 @@ init().then((instance) => {
510511})
511512```
512513
513- ` init ` 函数还可以将传递给 ` WebAssembly.instantiate ` 的导入对象作为其第二个参数：
514+ ` init ` 函数还可以将传递给 [ ` WebAssembly.instantiate ` ] ( https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiate ) 的导入对象作为其第二个参数：
514515
515516``` js
516517init ({
@@ -524,13 +525,54 @@ init({
524525})
525526```
526527
527- 在生产构建当中，体积小于 ` assetInlineLimit ` 的 ` .wasm ` 文件将会被内联为 base64 字符串。否则，它们将作为资源复制到 ` dist ` 目录中 ，并按需获取。
528+ 在生产构建当中，体积小于 ` assetInlineLimit ` 的 ` .wasm ` 文件将会被内联为 base64 字符串。否则，它们将被视为 [ 静态资源 ] ( ./assets ) ，并按需获取。
528529
529- ::: warning
530+ ::: tip 注意
530531[ 对 WebAssembly 的 ES 模块集成提案] ( https://github.com/WebAssembly/esm-integration ) 尚未支持。
531532请使用 [ ` vite-plugin-wasm ` ] ( https://github.com/Menci/vite-plugin-wasm ) 或其他社区上的插件来处理。
532533:::
533534
535+ ### 访问 WebAssembly 模块 {#accessing-the-webassembly-module}
536+
537+ 如果需要访问 ` Module ` 对象，例如将它多次实例化，可以使用 [ 显式 URL 引入] ( ./assets#explicit-url-imports ) 来解析资源，然后执行实例化：
538+
539+ ``` js
540+ import wasmUrl from ' foo.wasm?url'
541+
542+ const main = async () => {
543+ const responsePromise = fetch (wasmUrl)
544+ const { module , instance } = await WebAssembly .instantiateStreaming (
545+ responsePromise,
546+ )
547+ /* ... */
548+ }
549+
550+ main ()
551+ ```
552+
553+ ### 在 Node.js 中获取模块 {#fetching-the-module-in-node-js}
554+
555+ 在 SSR 中，作为 ` ?init ` 导入的 ` fetch() ` 可能会失败，导致 ` TypeError: Invalid URL ` 报错。
556+ 请参见问题 [ 在 SSR 中支持 wasm] ( https://github.com/vitejs/vite/issues/8882 ) 。
557+
558+ 以下是一种替代方案，假设项目根目录在当前目录：
559+
560+ ``` js
561+ import wasmUrl from ' foo.wasm?url'
562+ import { readFile } from ' node:fs/promises'
563+
564+ const main = async () => {
565+ const resolvedUrl = (await import (' ./test/boot.test.wasm?url' default
566+ const buffer = await readFile (' .' + resolvedUrl)
567+ const { instance } = await WebAssembly .instantiate (buffer, {
568+ /* ... */
569+ })
570+ /* ... */
571+ }
572+
573+ main ()
574+ ```
575+
534576## Web Workers {#web-workers}
535577
536578### 通过构造器导入 {#import-with-constructors}
@@ -559,7 +601,7 @@ import MyWorker from './worker?worker'
559601const worker = new MyWorker ()
560602```
561603
562- Worker 脚本也可以使用 ESM 的 ` import ` 语句来替代 ` importScripts() ` —— ** 注意** ，在开发过程中， 这依赖于[ 浏览器原生支持] ( https://caniuse.com/?search=module%20worker ) （目前在 Firefox 中不支持），而在生产版本中，它已经被编译掉了 。
604+ 这个 worker 脚本也可以使用 ESM ` import ` 语句而不是 ` importScripts() ` 。 ** 注意** ：在开发时， 这依赖于 [ 浏览器原生支持] ( https://caniuse.com/?search=module%20worker ) ，但是在生产构建中，它会被编译掉 。
563605
564606默认情况下，worker 脚本将在生产构建中编译成单独的 chunk。如果你想将 worker 内联为 base64 字符串，请添加 ` inline ` 查询参数：
565607
0 commit comments