モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜

JavaScriptフレームワークは、開発者が書いたコードを大幅に変換します。同一の9行のボタンコンポーネントが、Reactでは503行、Svelteではわずか12行のJavaScriptに変換されるのはなぜでしょうか？

本発表では、両フレームワークのビルドプロセスを分解し、各ステップで何が起きているかを可視化します。

Reactが実現するランタイムでの柔軟性（Virtual DOM、Fiber Architecture、Concurrent Rendering）には、Scheduler等 多層の抽象化が必要です。一方Svelteは、コンパイル時の静的解析により、これらの抽象化層を完全に除去し、純粋なDOM操作コードのみを生成します。

実測データを基に、この設計思想の違いがバンドルサイズ等にどう影響するかを明らかにし、プロジェクト特性に応じたフレームワーク選択の指針を提示できればと思っています。