最简可靠加载路径是 fetch → arrayBuffer → compile → instantiate，必须配 importObject、处理导出名下划线前缀、确认 exports 可调用；emcc 胶水文件更稳因封装缓存、内存视图与运行时结构；Webpack 5 需配置 type: 'webassembly/async' 并 await init()。
直接用原生 WebAssembly.instantiate 加载 .wasm 文件是可行的，但新手极易卡在模块初始化、内存对齐、函数导出命名和类型匹配上——尤其是看到 LinkError: import object field 'env' is not a Function 这类报错时，往往不是代码问题，而是加载流程没走对。
怎么让 HTML 正确加载并调用一个 .wasm 文件
关键不在“能不能加载”，而在于“加载后能不能拿到可调用的 exports”。浏览器不支持直接 <script src="xxx.wasm">，必须走 fetch + compile + instantiate 流程。最简可靠路径如下：
- 确保 .wasm 文件是纯二进制（非文本格式 .wat），且服务端返回
Content-Type: application/wasm（开发时用npx serve或 VS Code Live Server 即可，不用自己配） - 用
fetch().then(r => r.arrayBuffer())获取字节码，不能用text()或直接json() - 调用
WebAssembly.compile()后必须等它 resolve 再传给instantiate()；如果跳过compile直接传 buffer 给instantiate()，会报TypeError: WebAssembly.instantiate(): Argument 0 must be a buffer source - 导出函数名默认带下划线前缀（如 C 函数
add编译后是_add），除非显式用-s EXPORT_NAME=...或EMSCRIPTEN_KEEPALIVE控制
为什么用 emcc 生成的 .js 胶水文件比手写加载更稳
emcc 输出的 add.js 不只是加载器，它封装了三件事：模块预编译缓存、内存堆（HEAP32 等视图）、以及自动处理 __indirect_function_table 等运行时结构。新手手写加载常忽略：
- 没配
importObject：C 代码里用了printf或 malloc 就必须提供env和wasi_snapshot_preview1导入对象，否则 instantiate 失败 - 没处理异步初始化：emcc 生成的 JS 有
onRuntimeInitialized钩子，而原生 API 没这层保障 - 整数溢出陷阱：C 的
int是 32 位有符号，JS 传2147483648会静默转成负数，结果完全不对
Webpack 5 下怎么让 .wasm 文件参与打包而不报错
Webpack 5 内置 Wasm 支持，但默认不启用。只需两步，不用装额外 loader：
立即学习“前端免费学习笔记（深入）”；
- 在
webpack.config.js的module.rules里加：{ test: /\.wasm$/, type: 'webassembly/async' } - 在 JS 中用
import init, { add } from './add.wasm'—— 注意：这里add是导出名，不是文件名；且必须先await init()才能调用add - 别把
.wasm当静态资源扔进public/：Webpack 无法解析其依赖，会导致WebAssembly.instantiateStreaming is not supported（因未启用 streaming） - 若用
html-webpack-plugin，别手动写<script>加载 wasm，改用插件的templateParameters注入模块路径，避免硬编码
最容易被忽略的调试点：WASM 模块的导出表和内存视图
很多计算结果异常，不是逻辑错，而是没看清导出内容。用浏览器开发者工具的 “Memory” 或 “WebAssembly” 面板看不出问题，得靠代码确认：
- 打印
instance.exports看真实键名，C 函数int add(int, int)在 Emscripten 下默认导出为_add，Rust 下可能是add（取决于wasm-bindgen配置） - 检查
instance.exports.memory是否存在：没有它，就无法读写数组或字符串；Emscripten 默认带，Rust +wasm-bindgen默认不带，需显式#[wasm_bindgen(memory)] - 调用函数前，用
typeof instance.exports.add === 'function'做防护，避免undefined is not a function
真正卡住人的，从来不是“怎么写第一个 WASM”，而是“为什么导出函数调不通”——多打一行 console.log(instance.exports)，比查一小时文档更管用。
