WebAssembly & Performance 5. Mai 2026 11 min Lesezeit

WebAssembly mit Claude Code: Wasm im Browser & Node.js 2026

WebAssembly bringt native Performance in den Browser — Bildverarbeitung, Kryptographie, Simulation. Claude Code kennt den kompletten Wasm-Workflow: von Rust zu Wasm kompilieren, JavaScript-Interop, Speicherverwaltung und WASI für serverseitiges Wasm.

Wann ist WebAssembly sinnvoll?

Use Case	JavaScript	WebAssembly	Speedup
Bildkomprimierung (PNG)	850ms	95ms	~9x
SHA-256 (1MB)	45ms	8ms	~5x
JSON Parse/Stringify	12ms	15ms	Kein Vorteil
DOM Manipulation	Optimal	Overhead (Interop)	Langsamer
FFT / Signalverarbeitung	200ms	18ms	~11x
PDF Rendering	2.4s	380ms	~6x

Faustregel: WebAssembly lohnt sich für CPU-intensive Berechnungen ohne viel DOM-Interaktion. Für DOM-Manipulation, einfache String-Operations oder I/O bleibt JavaScript die bessere Wahl.

Wasm direkt laden: Die Basics

JSWebAssembly aus JavaScript laden

# Prompt: "Lade eine .wasm-Datei und rufe Funktionen auf"

// Methode 1: WebAssembly.instantiateStreaming (bevorzugt)
const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/wasm/math.wasm'),
  {
    env: {
      memory: new WebAssembly.Memory({ initial: 256 }),  // 256 Pages = 16MB
      abort: () => throw new Error('Wasm abort'),
    }
  }
);

// Exportierte Wasm-Funktionen aufrufen:
const { add, fibonacci, compress } = instance.exports;
console.log(add(21, 21));           // 42
console.log(fibonacci(40));          // Blitzschnell!

// Methode 2: ArrayBuffer (für komplexere Setups)
const response = await fetch('/wasm/lib.wasm');
const bytes = await response.arrayBuffer();
const module = await WebAssembly.compile(bytes);
const instance = await WebAssembly.instantiate(module);

// Wasm-Speicher lesen (für komplexe Daten):
const memory = instance.exports.memory as WebAssembly.Memory;
const view = new Uint8Array(memory.buffer);
// Bytes ab Pointer-Offset lesen:
const ptr = instance.exports.get_data() as number;
const data = view.slice(ptr, ptr + 1024);

Rust zu WebAssembly kompilieren

RustRust → Wasm mit wasm-pack

# Prompt: "Erstelle eine Rust-Bibliothek, die zu Wasm kompiliert"

# Setup:
rustup target add wasm32-unknown-unknown
cargo install wasm-pack

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

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

[dependencies]
wasm-bindgen = "0.2"
js-sys = "0.3"

// src/lib.rs — Rust-Code für Wasm
use wasm_bindgen::prelude::*;

// #[wasm_bindgen] = sichtbar von JavaScript
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// Grayscale-Konvertierung: Uint8Array → Uint8Array
#[wasm_bindgen]
pub fn grayscale(pixels: &[u8]) -> Vec<u8> {
    pixels
        .chunks_exact(4)  // RGBA
        .flat_map(|rgba| {
            let gray = (0.299 * rgba[0] as f64
                      + 0.587 * rgba[1] as f64
                      + 0.114 * rgba[2] as f64) as u8;
            [gray, gray, gray, rgba[3]]
        })
        .collect()
}

// JavaScript-Klassen in Rust wrappen:
#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        ImageProcessor { width, height }
    }

    pub fn process(&self, pixels: &[u8]) -> Vec<u8> {
        grayscale(pixels)
    }
}

# Kompilieren und in NPM-Paket umwandeln:
wasm-pack build --target web --out-dir ./pkg

# pkg/ enthält:
# - image_processor.js     (JS-Wrapper mit TypeScript-Typen)
# - image_processor_bg.wasm (Kompiliertes Wasm)
# - image_processor.d.ts   (Auto-generierte TypeScript-Definitionen)
# - package.json

JavaScript-Interop: Wasm mit Canvas

JSBildverarbeitung mit Canvas + Wasm

# Prompt: "Canvas-Bildverarbeitung mit Wasm-Grayscale-Filter"

// TypeScript + wasm-pack generiertes Paket:
import init, { ImageProcessor } from './pkg/image_processor.js';

async function applyGrayscaleFilter(canvas: HTMLCanvasElement) {
  await init();  // Wasm-Modul initialisieren

  const ctx = canvas.getContext('2d')!;
  const { width, height } = canvas;
  const imageData = ctx.getImageData(0, 0, width, height);

  // RGBA-Pixel-Array an Wasm übergeben:
  const processor = new ImageProcessor(width, height);
  const grayscalePixels = processor.process(imageData.data);

  // Ergebnis zurück in Canvas schreiben:
  const newImageData = new ImageData(grayscalePixels, width, height);
  ctx.putImageData(newImageData, 0, 0);
}

// Web Worker für non-blocking Verarbeitung:
// worker.ts
import init, { grayscale } from './pkg/image_processor.js';

self.onmessage = async (e: MessageEvent) => {
  await init();
  const result = grayscale(new Uint8Array(e.data.pixels));
  self.postMessage({ pixels: result.buffer }, [result.buffer]);
};

Web Worker + Wasm: Intensive Wasm-Berechnungen sollten IMMER in einem Web Worker laufen — sonst blockieren sie den Haupt-Thread und frieren die UI ein. Claude Code generiert Worker-Wrapper für Wasm-Module automatisch.

WASI: WebAssembly im Server

# Prompt: "Führe ein Wasm-Modul serversetig in Node.js aus (WASI)"

// Node.js WASI API (ab v18 stabil):
import { WASI } from 'node:wasi';
import { readFile } from 'node:fs/promises';

const wasi = new WASI({
  version: 'preview1',
  args: process.argv,
  env: process.env,
  preopens: {
    '/sandbox': '/tmp/wasm-sandbox',  // Dateisystem-Isolation
  },
});

const wasmBuffer = await readFile('./program.wasm');
const { module, instance } = await WebAssembly.instantiate(
  wasmBuffer,
  wasi.getImportObject()
);

wasi.start(instance);
// Wasm läuft in isolierter Sandbox — kein Dateisystem-Zugriff außer /sandbox!

// Use Case: Untrusted Code sicher ausführen
// Plugin-System: Drittanbieter-Plugins als .wasm — kein Sicherheitsrisiko
// Serverless: extrem schneller Cold-Start (<1ms vs. ~100ms für Node.js)

Vite + Wasm Setup

SetupWebAssembly in Vite-Projekten

# vite.config.ts — Wasm-Support aktivieren:
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  plugins: [
    wasm(),
    topLevelAwait(),  // Für async Wasm-Init auf Top-Level
  ],
});

# package.json:
npm install -D vite-plugin-wasm vite-plugin-top-level-await

# Dann direkt importieren (kein manuelles fetch nötig):
import init, { fibonacci } from './wasm/math.wasm?init';
await init();
console.log(fibonacci(42));

WebAssembly-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges WebAssembly-Modul mit Rust-zu-Wasm-Pipeline, JavaScript-Interop, Canvas-Bildverarbeitung, Web Workers und WASI für serverseitiges Wasm — inkl. Performance-Benchmarks und Vite-Integration.

14 Tage kostenlos testen →