今天，我們來看 Rust 在 WebAssembly (Wasm) 開發中的應用。WebAssembly 是一種可以在現代網頁瀏覽器中運行的低階語言，而 Rust 是編譯到 WebAssembly 的理想語言之一。
wasm-pack 是一個用於建構、測試和發布 Rust 產生的 WebAssembly 的工具。
首先，建立一個新的 Rust 專案：
cargo new --lib wasm-example
cd wasm-example
在 Cargo.toml 中加入以下依賴：
[lib]
crate-type = ["cdylib", "rlib"]
[dependencies]
wasm-bindgen = "0.2"
在 src/lib.rs 中編寫以下程式碼：
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
if n <= 1 {
return n;
}
let mut a = 0;
let mut b = 1;
for _ in 2..=n {
let temp = a + b;
a = b;
b = temp;
}
b
}
使用 wasm-pack 建構專案：
wasm-pack build --target web
建立一個 HTML 文件來使用我們的 WebAssembly 模組：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rust WebAssembly 示例</title>
</head>
<body>
<script type="module">
import init, { fibonacci } from './pkg/wasm_example.js';
async function run() {
await init();
const result = fibonacci(10);
console.log('Fibonacci(10) =', result);
}
run();
</script>
</body>
</html>
Yew 是一個現代化的 Rust 框架，用於創建多執行緒的前端 Web 應用程式。
建立一個新的 Yew 專案：
cargo new yew-app
cd yew-app
在 Cargo.toml 中加入以下依賴：
[dependencies]
yew = "0.19"
在 src/main.rs 中編寫以下程式碼：
use yew::prelude::*;
#[function_component(App)]
fn app() -> Html {
let counter = use_state(|| 0);
let onclick = {
let counter = counter.clone();
Callback::from(move |_| {
let value = *counter + 1;
counter.set(value);
})
};
html! {
<div>
<button {onclick}>{ "+1" }</button>
<p>{ *counter }</p>
</div>
}
}
fn main() {
yew::start_app::<App>();
}
gloo 是一組用於 Rust 和 WebAssembly 的模組化工具包。
在 Cargo.toml 中增加：
[dependencies]
gloo = "0.8"
使用 gloo 進行 HTTP 請求：
use gloo::net::http::Request;
use wasm_bindgen_futures::spawn_local;
fn fetch_data() {
spawn_local(async {
let response = Request::get("https://api.example.com/data")
.send()
.await
.unwrap();
let result = response.text().await.unwrap();
log::info!("Received data: {}", result);
});
}
使用 wee_alloc：這是一個輕量級的分配器，可以減小 Wasm 二進制檔案的大小。
// 在 lib.rs 頂部
extern crate wee_alloc;
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
啟用 Link Time Optimization (LTO)：在 Cargo.toml 中增加：
[profile.release]
lto = true
使用 wasm-opt 工具：這個工具可以進一步優化 Wasm 二進制檔案。
iThome鐵人賽
看影片追技術