Rust + wasm-pack 演示

<!-- 使用 type="module" 才能 import -->
<script type="module">
    // 从生成的 JS 胶水代码中导入 init 和所有导出函数
    import init, { greet, add } from './pkg/hello_wasm.js';

    async function main() {
        // 初始化 WASM 模块（必须且仅调用一次）
        await init();

        // 调用 Rust 函数，就像调用普通 JS 函数
        const message = greet("WebAssembly");
        const result = add(100, 200);

        document.getElementById('output').innerHTML = `
            <p>${message}</p>
            <p>100 + 200 = ${result}</p>
        `;
    }

    main();
</script>

查看效果

1. 在终端中运行 python3 -m http.server 8080（确保当前目录是项目根）。
2. 打开浏览器，访问 http://localhost:8080。
3. 你将看到页面显示问候语和加法结果，证明 Rust 代码已成功在浏览器中执行。

构建目标详解

wasm-pack build 的 --target 参数决定了生成包的运行环境：

对于常见的静态网站或教学演示，web 目标是最简单、最推荐的选择。

调试与常见问题

编译错误：wasm32-unknown-unknown 目标未安装

报错信息：error: couldn't find wasm32-unknown-unknown target
解决：执行 rustup target add wasm32-unknown-unknown。

浏览器报错：Failed to load module script

通常是因为 HTML 中没有使用 type="module"，或者 .js 文件路径不正确。确保 <script> 标签带有 type="module"，且路径与实际目录结构一致。

init() 未调用或未 await

所有 Rust 导出的函数必须在 init() 完成后才能调用，否则会抛出错误。务必使用 await init() 并确保其在调用其他函数之前执行。

MIME 类型错误

部分本地服务器可能无法正确提供 .wasm 文件的 application/wasm MIME 类型。使用 Python 的 http.server 通常没有问题。若遇到，可换用 npx serve 或安装专用的静态服务器。

打包体积优化

如果想进一步减小 .wasm 体积，可在 Cargo.toml 的 [profile.release] 段添加：

[profile.release]
opt-level = 's'     # 优化体积
lto = true          # 启用链接时间优化

然后使用 wasm-pack build --target web --release 构建，体积会显著下降（通常减少 20-50%）。

扩展：快速使用模板

如果你想跳过手动创建过程，wasm-pack 提供了官方模板：

wasm-pack new hello-wasm-template