WebAssembly Implementation：Claude Code 实战指南

WebAssembly集成を通过 Claude Code実現する

WebAssembly（Wasm）は浏览器でネイティブに近い速度で動作するバイナリ形式です。图片処理、暗号計算、ゲームロジックなどCPU負荷の高い処理をWebで高速に実行可以。借助 Claude Code，Wasm模块の创建から集成までスムーズに進められます。

RustからWasm模块を创建

> Rustで图片フィルタ処理のWasm模块创建。
> wasm-packで构建する结构にして。

# Cargo.toml
[package]
name = "image-filter"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"
web-sys = { version = "0.3", features = ["console"] }

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for chunk in pixels.chunks_exact_mut(4) {
        let gray = (0.299 * chunk[0] as f64
            + 0.587 * chunk[1] as f64
            + 0.114 * chunk[2] as f64) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
        // chunk[3] はアルファ値、那个まま
    }
}

#[wasm_bindgen]
pub fn blur(pixels: &mut [u8], width: u32, height: u32, radius: u32) {
    let src = pixels.to_vec();
    let r = radius as i32;

    for y in 0..height as i32 {
        for x in 0..width as i32 {
            let mut r_sum = 0u32;
            let mut g_sum = 0u32;
            let mut b_sum = 0u32;
            let mut count = 0u32;

            for dy in -r..=r {
                for dx in -r..=r {
                    let nx = (x + dx).clamp(0, width as i32 - 1) as usize;
                    let ny = (y + dy).clamp(0, height as i32 - 1) as usize;
                    let idx = (ny * width as usize + nx) * 4;
                    r_sum += src[idx] as u32;
                    g_sum += src[idx + 1] as u32;
                    b_sum += src[idx + 2] as u32;
                    count += 1;
                }
            }

            let idx = (y as usize * width as usize + x as usize) * 4;
            pixels[idx] = (r_sum / count) as u8;
            pixels[idx + 1] = (g_sum / count) as u8;
            pixels[idx + 2] = (b_sum / count) as u8;
        }
    }
}

JavaScriptからWasmを読み込む

> Wasm模块を浏览器で読み込んで、
> Canvas图片に適用する処理を書いて。

// src/wasm-loader.ts
import init, { grayscale, blur } from '../pkg/image_filter';

export async function initWasm() {
  await init();
}

export async function applyGrayscale(canvas: HTMLCanvasElement) {
  const ctx = canvas.getContext('2d')!;
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = new Uint8Array(imageData.data.buffer);

  grayscale(pixels);

  ctx.putImageData(imageData, 0, 0);
}

export async function applyBlur(
  canvas: HTMLCanvasElement,
  radius: number
) {
  const ctx = canvas.getContext('2d')!;
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = new Uint8Array(imageData.data.buffer);

  blur(pixels, canvas.width, canvas.height, radius);

  ctx.putImageData(imageData, 0, 0);
}

构建と打包配置

# wasm-packでビルド
wasm-pack build --target web --out-dir pkg

# Viteでの設定
# vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  plugins: [wasm(), topLevelAwait()],
  build: {
    target: 'esnext',
  },
});

性能比較

JavaScriptとWasmの処理速度を比較してみましょう。

// benchmark.ts
async function benchmark() {
  const size = 1920 * 1080 * 4;
  const pixels = new Uint8Array(size);
  crypto.getRandomValues(pixels);

  // JavaScript版
  const jsStart = performance.now();
  grayscaleJS(pixels);
  const jsTime = performance.now() - jsStart;

  // Wasm版
  const wasmStart = performance.now();
  grayscale(pixels);
  const wasmTime = performance.now() - wasmStart;

  console.log(`JS: ${jsTime.toFixed(2)}ms`);
  console.log(`Wasm: ${wasmTime.toFixed(2)}ms`);
  console.log(`速度比: ${(jsTime / wasmTime).toFixed(1)}x`);
}

Full HDサイズの图片処理では、Wasm版がJavaScript版の3〜5倍高速に動作する場合があります。

总结

WebAssemblyを活用すれば、Web应用の性能を大幅に向上可以。借助 Claude Code，RustやAssemblyScriptのコード生成からJavaScript集成まで高效地進められます。性能优化指南やRust开发也可以参考。

WebAssembly的详细信息请参阅MDN WebAssembly指南。