WebAssembly（WASM）是一门非常令人兴奋的技术，由W3C主导制定，主流浏览器均支持。它最核心的优势是高性能，是对javaScript的重要补充。很多种语言都可以编写WASM，并将其编译成二进制文件，在浏览器上的执行速度接近原生C/C++。
本文简要介绍如何使用Rust和AssemblyScript这两种技术栈开发WASM应用。
Rust开发WASM
开发环境
1
2
3
4
| # 构建工具
cargo install wasm-pack
# 为wasm模块生成js胶水代码
cargo install wasm-bindgen-cli
|
创建项目
1
| cargo new --lib hello-wasm
|
以下是Cargo.toml文件，需要添加wasm-bindgen库：
1
2
3
4
5
6
7
8
9
10
| [package]
name = "hello-wasm"
version = "0.1.0"
edition = "2024"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "*"
|
编写wasm逻辑
在lib.rs中添加wasm逻辑代码，可以声明Javascript中的函数，也可以定义自定义函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
#[wasm_bindgen(js_namespace=console)]
fn log(s:&str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
log(&format!("Hello, {}!", name));
}
#[wasm_bindgen]
pub fn fibonacci(n: i32) -> i32 {
if n <= 1 {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
}
|
编译
执行以下命令，可以生成一个pkg文件夹，里面包含了wasm的生成文件，已经是Release版本。
1
| wasm-pack build --target web
|
核心文件如下：
- hello_wasm_bg.wasm：wasm二进制文件。
- hello_wasm.js：Javascript胶水语言。
测试
以下是html文件，通过模块方式引入main.js：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rust WASM Test</title>
</head>
<body>
<h1>Rust WASM 测试页面</h1>
<button id="greetBtn">打招呼 (Greet)</button>
<button id="fibBtn">计算 Fibonacci(10)</button>
<p>结果: <span id="result">-</span></p>
<script type="module" src="./main.js"></script>
</body>
</html>
|
以下是main.js的核心逻辑，直接从胶水代码中引入核心函数，注意：需要先异步执行init函数才能正常加载！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import init, { greet, fibonacci } from './pkg/hello_wasm.js';
(async () => {
await init();
console.log("WASM 模块加载成功！");
document.getElementById('greetBtn').addEventListener('click', () => {
greet("Web 浏览器");
});
document.getElementById('fibBtn').addEventListener('click', () => {
const n = 10;
const result = fibonacci(n);
document.getElementById('result').textContent = `fibonacci(${n}) = ${result}`;
});
})();
|
AssemblyScript开发WASM
可以说AssemblyScript是直接在前端项目中集成WASM最便捷的方式，AssemblyScript使用TypeScript语言开发，可以和Vue3项目无缝集成。
创建项目
1
2
3
4
5
6
7
8
9
| # 创建Vue3项目，TypeScript
npm create vue@latest test-as
cd test-as
npm install
# 安装assemblyscript开发依赖
npm install -D assemblyscript
# 自动生成相关文件
npx asinit .
|
执行npx asinit .后会生成并更新以下文件：
编写并编译WASM代码
先编译wasm，在编译运行Vue3前端项目：
1
2
| npm run asbuild
npm run dev
|
测试
与Rust编写WASM存在差异，这里直接引入WASM模块中的函数即可，不需要手动初始化。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script setup lang="ts">
import { ref } from "vue";
import { add } from "../build/release";
const res = ref(0);
const clickHandler = () => res.value = add(100, 300);
</script>
<template>
<h1>{{ res }}</h1>
<button @click="clickHandler">计算</button>
</template>
<style scoped></style>
|