Luna Benchmark Report

Luna vs React vs Preact の比較ベンチマーク結果。

TL;DR - Luna の強み

Bundle Size Comparison

Luna は React の 1/6 のサイズ。Preact より大きいが、Signal, SSR, Island Architecture を含むフルスタックフレームワーク。

Runtime Performance

jsdom 環境でのベンチマーク結果 (vitest bench)。

Initial Mount (2,500 cells)

Reactive State Mount (2,500 cells)

State Update (2,500 cells)

Note: Preact の Update が極端に速いのは、状態変更のバッチ処理による可能性あり。

Large Grid (5,000 cells)

List Operations (Add 100 items)

Analysis

Current Status

Luna は現時点で速度面では React/Preact に劣っています。これは以下の要因による：

1. MoonBit → JS コンパイル: 生成された JS コードは手書きより最適化の余地がある

2. Fine-Grained Reactivity のオーバーヘッド: 各要素ごとの依存追跡コスト

3. 開発初期段階: まだ最適化が進んでいない

Luna の価値提案

速度だけが全てではありません。Luna は以下の価値を提供します：

Future Optimization Opportunities

1. wasm-gc target: MoonBit は wasm-gc にコンパイル可能。将来的に JS より高速になる可能性

2. コンパイラ最適化: MoonBit コンパイラの改善による自動的な高速化

3. DOM 操作の最適化: 現在の実装にはまだ改善の余地がある

Benchmark Environment

• Node.js v24 + jsdom

• Vitest 4.0.15

• macOS Darwin 24.5.0

Running Benchmarks

cd luna.mbt
npx vitest bench js/luna/benches/grid.bench.ts --run

Luna の強み - MoonBit ベンチマーク

Luna 内部の MoonBit ベンチマーク結果。これらは Luna の設計上の強みを示しています。

SSR (Server-Side Rendering)

SSR 性能は非常に高速 - 1000要素のリストを 78µs で生成可能。

Signal (Fine-Grained Reactivity)

Signal 更新は 11M ops/sec - React の setState より桁違いに高速。

DOM 更新 (Fine-Grained)

部分更新は 4.5M ops/sec - VDOM diff なしで直接 DOM 更新。

なぜ Luna は VDOM ベンチで遅いのか

Grid ベンチマーク（2,500セル全更新）では Luna は Preact より遅いが、これは：

1. 全要素更新は Luna の想定外ユースケース

   • Fine-Grained Reactivity は「一部だけ更新」が前提

   • 2,500セル全部を毎回更新するのは VDOM 向き

2. Luna の設計思想

   • 変更された Signal だけが DOM を更新

   • 1セルの更新 = 0.22µs（VDOM diff 不要）

3. 実際のアプリでは Luna が有利なケース

   • ほとんどの UI は部分更新

   • Island Architecture で初期化コストを分散

Conclusion

Luna が向いているケース

• ✅ SSR + 選択的ハイドレーション が必要

• ✅ Island Architecture で部分ハイドレーションしたい

• ✅ 部分更新が多い UI（リアクティブなダッシュボード等）

• ✅ 小さなバンドルサイズ が重要（React の 1/6）

• ✅ MoonBit で型安全な UI を書きたい

• ✅ 将来的な wasm-gc 対応を見据えている

Luna が向いていないケース

• ❌ 大量要素の全更新（ゲームのフレーム更新等）

• ❌ React/Preact エコシステム（既存ライブラリ）が必要

比較まとめ