2026年WebAssembly组件模型（Wasm Component Model）详解

问题1：模块间不互操作
  - Rust编译的Wasm无法调用C++编译的Wasm
  - 需要手动编写胶水代码（FFI）

问题2：依赖管理混乱
  - 没有标准包格式
  - 无法像npm那样共享Wasm模块

问题3：系统接口不统一
  - WASI（WebAssembly System Interface）不成熟
  - 无法访问文件系统/网络（除了通过JS）

目标1：互操作性
  → 任何语言编译的Wasm组件可互相调用

目标2：可组合性
  → 像npm包一样组合Wasm组件

目标3：安全性
  → 基于Capability的安全模型（默认无权限）

// math.wit - 定义接口
package my-math;

interface calculator {
  add: func(a: s32, b: s32) -> s32;
  subtract: func(a: s32, b: s32) -> s32;
}

world math-world {
  export calculator;
}

# 使用wit-bindgen生成绑定
wit-bindgen rust --world math-world math.wit

# 生成：
# - src/bindings/mod.rs（Rust绑定）
# - 其他语言的绑定（可选）

# 1. 编译Rust为Wasm模块
cargo build --target wasm32-wasi --release

# 2. 转换为组件
wasm-tools component new \
  target/wasm32-wasi/release/math.wasm \
  -o math.component.wasm \
  --adapt wasi_preview1.wasm

# 3. 验证组件
wasm-tools validate math.component.wasm --features component-model

// src/lib.rs
use wasi::http;

#[no_mangle]
pub extern "C" fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[no_mangle]
pub extern "C" fn process_data(data: *const u8, len: usize) -> *const u8 {
    // 处理数据（在Wasm中执行）
    let slice = unsafe { std::slice::from_raw_parts(data, len) };
    let result = do_something(slice);
    // 返回指针
    // ...
}

// 使用Component Model API（实验性）
const { instance } = await WebAssembly.instantiateStreaming(
  fetch('math.component.wasm'),
  {}
);

const result = instance.exports.add(10, 20);
console.log(result);  // 30

# 安装wasmtime
curl https://wasmtime.dev/install.sh -sSf | bash

# 运行组件
wasmtime math.component.wasm --invoke add 10 20
# 输出：30

// string-utils.wit
package string-utils;

interface utils {
  reverse: func(s: string) -> string;
  to-upper: func(s: string) -> string;
}

// src/lib.rs
#[no_mangle]
pub extern "C" fn reverse(s: *const u8, len: usize) -> *const u8 {
    let input = unsafe { std::slice::from_raw_parts(s, len) };
    let reversed: Vec<u8> = input.iter().rev().cloned().collect();
    // 返回新字符串（简化）
    // ...
}

# 安装wasmtime-py
pip install wasmtime

import wasmtime

# 加载组件
store = wasmtime.Store()
module = wasmtime.Module(store.engine, open('string-utils.component.wasm', 'rb').read())
instance = wasmtime.Instance(store, module, [])

# 调用函数
reverse_fn = instance.exports['reverse']
result = reverse_fn(store, "Hello")
print(result)  # "olleH"

WASI 0.2.0 涵盖：
- 文件系统访问（POSIX-like）
- 网络通信（sockets）
- 时钟（clock）
- 随机数（random）
- 环境变量（environment variables）

// Cargo.toml
[dependencies]
wasi = "0.2.0"

// src/main.rs
use wasi::http::outgoing_handler;

fn main() {
    let request = http::OutgoingRequest::new(
        "https://api.example.com/data"
    );

    let response = outgoing_handler::handle(request).unwrap();
    let body = response.body().read_to_end().unwrap();

    println!("Response: {:?}", body);
}

# 编译
cargo build --target wasm32-wasi --release

# 转换为组件（适配WASI Preview 2）
wasm-tools component new \
  target/wasm32-wasi/release/app.wasm \
  -o app.component.wasm \
  --adapt wasi-preview2.wasm

WordPress (PHP)
    ↓ exec()
Wasmtime (Wasm运行时)
    ↓ 执行
Wasm组件（Rust/Python编译）
    → 返回结果到WordPress

// WordPress插件示例
function run_wasm_component($wasm_file, $function, $args) {
    $wasmtime_path = '/usr/local/bin/wasmtime';
    $cmd = sprintf(
        '%s run --invoke %s %s %s',
        $wasmtime_path,
        escapeshellarg($function),
        escapeshellarg($wasm_file),
        implode(' ', array_map('escapeshellarg', $args))
    );

    $output = shell_exec($cmd);
    return $output;
}

// 使用
$result = run_wasm_component(
    plugin_dir_path(__FILE__) . 'math.component.wasm',
    'add',
    [10, 20]
);
echo $result;  // 30

类似npm，但跨语言：
- 发布Wasm组件到注册表
- 其他语言直接导入使用
- 依赖自动解析

工具：
-  wasm-pkg（类似npm）
-  Central（字节码联盟官方注册表）

问题：Wasm组件可能包含恶意代码

解决：组件签名
-  使用Ed25519签名组件
-  运行时验证签名（wasmtime）
-  仅运行受信任的组件

命令：
wasm-tools sign component.wasm --key private-key.pem
wasm-tools verify component.wasm --cert public-cert.pem

当前：静态链接（组件体积大）

2026年目标：动态链接
-  共享组件作为"共享库"
-  多个应用共享同一个组件实例
-  减少内存占用

实现：
wasm-tools component link \
  app.component.wasm \
  --import shared-lib.component.wasm \
  -o linked.component.wasm