Vite 8.1のRolldownバンドラでビルド時間を実測比較した
Vite 8.1（Rolldown）・Webpack 5.109・Turbopack（Next.js 16）で同規模のReactプロジェクトをビルドし、本番ビルドと開発起動の実測値を並べた記録。
測ることになった経緯
受託で触っているReactプロジェクトが3つあり、それぞれWebpack・Vite 7（Rollup）・Next.js + Turbopackで動いている。Vite 8が3月に出てRolldownに一本化された話は追っていたが、「速い」の一言で済ませていた。6月にVite 8.1が出てBundled Dev Modeなる実験機能まで入ったので、いい加減ちゃんと数字を取ろうと思った。
比較対象は3つ。Vite 8.1.4（Rolldown）、Webpack 5.109.2、Next.js 16.3のTurbopack。後述するが、TurbopackはNext.js専用なので厳密に同じ土俵ではない。それでも「Rustベースのバンドラ3つ巴」として並べる意味はあると判断した。
計測対象と条件
手元のReactプロジェクトをそのまま使うと構成が違いすぎるので、条件を揃えるために簡単なプロジェクトを用意した。
- Reactコンポーネント約200個、TypeScript、CSS Modules使用
- 外部依存はreact, react-dom, react-router, zustand, date-fns程度
- ソースコード行数はおよそ1.2万行（テスト除く）
Vite 8.1とWebpackはこのプロジェクトをそれぞれのビルド設定で動かした。Turbopackは同じコンポーネントをNext.js 16.3のApp Routerに載せ替えて計測した。フレームワークの差は承知の上で、「バンドラの仕事量」としてはおおむね同規模になるよう調整している。
本番ビルドは各ツール5回実行して中央値を採った。開発サーバーの起動時間はキャッシュを消した状態でのコールドスタート。HMRはルートに近いコンポーネントを1行変更してブラウザに反映されるまでの時間を目視+Performance APIで取った。
本番ビルドの結果
| Vite 8.1 (Rolldown) | Webpack 5.109 | Turbopack (Next.js 16.3) | |
|---|---|---|---|
| 本番ビルド | 約2.8秒 | 約14秒 | 約5秒 |
| 出力サイズ | 412KB (gzip) | 438KB (gzip) | 391KB (gzip) |
Vite 8.1が圧倒的に速い。Webpackの5倍近い差がついた。
Rolldownが速い理由は単純で、Rustでパース・バンドル・ツリーシェイキングまで一気通貫でやるからだ。Vite 7まではesbuildとRollupを別々に走らせていたのが、Rolldown 1.0で1つのパイプラインに統合された。公式が「10〜30x faster than Rollup」と書いているのは大規模プロジェクトでの話だが、この規模でも体感で3〜4倍は速くなった印象がある。
Turbopackは意外と健闘した。ただしTurbopackの出力サイズが小さいのはNext.js側のチャンク分割戦略による部分が大きく、バンドラ単体の最適化とは言い切れない。
Webpackは……まあ14秒が遅いかと言われると、1.2万行のプロジェクトとしてはそんなものだろう。ただ2026年に新規で選ぶ理由は正直思いつかない。
開発体験の差
| Vite 8.1 (Rolldown) | Webpack 5.109 | Turbopack (Next.js 16.3) | |
|---|---|---|---|
| コールドスタート | 約0.4秒 | 約8秒 | 約1.2秒 |
| HMR（ルート近く） | 約50ms | 約800ms | 約70ms |
ここがいちばん差が出た。Webpackの8秒は体感でかなりつらい。Vite 8.1は0.4秒で立ち上がる。コーヒーを取りに行く暇がない。
HMRはViteとTurbopackがほぼ互角。どちらも「保存したら即反映」の体験は変わらない。Webpackの800msは一瞬待つ感覚があり、細かい調整を繰り返すCSS作業では差が積もる。
Vite 8.1で追加されたBundled Dev Mode（実験的機能）も試した。1万コンポーネント規模でないと効果が薄いとの記載通り、200コンポーネント程度では通常モードとの差はほぼなかった。大規模アプリでは起動が15倍速くなるらしいが、自分の環境では検証できていない。
Turbopackの「条件付き」感
数字だけ見るとTurbopackはVite 8.1に次ぐ好成績だが、1つ大きな制約がある。Next.js専用ということだ。
2026年8月時点で、TurbopackをNext.js以外のプロジェクトで使う方法は公式に提供されていない。「スタンドアロン版を出す」という話はあるが、具体的なロードマップは出ていない。つまりReact単体のSPAやVue・Svelteプロジェクトには使えない。
Next.jsを使うならTurbopackは16からデフォルトで、opt-outしない限り勝手に使われる。選択の余地がないとも言える。逆にNext.js以外なら選択肢にすら入らない。
Webpackをまだ使っている場合
Webpack 5.109はVite互換のモジュールAPI（import.meta.globやimport.meta.env）を取り込むなど、追従の姿勢を見せている。だがビルド速度の差は構造的なもので、JSベースのバンドラがRustベースに追いつくのは原理的に難しい。
移行コストが見合うかは規模による。1.2万行ならVite 8への移行は半日で終わった。RolldownはRollupプラグインとの互換性を維持しているので、Vite 7以前から上げる場合もプラグインまわりでハマることは少ないはず。Webpack→Viteの移行は設定体系がまるごと変わるので、それなりに覚悟がいる。
ここまでの判断
- 新規プロジェクトならVite 8.1一択。理由を説明する必要がないレベルで速い
- Next.jsプロジェクトはTurbopackがデフォルトなのでそのまま使えばいい。わざわざWebpackに戻す理由はない
- 既存Webpackプロジェクトの移行は、ビルド時間が業務のボトルネックになっているかどうかで判断する。14秒が許容できるなら急ぐ必要はない
Rolldownの裏側にいるのはEvan You率いるVoidZeroで、2026年6月にCloudflareに買収された。Viteのnpm weeklyダウンロードは4,100万を超えており、エコシステムの持続性は当面心配なさそうだ。
検証環境: Ubuntu 22.04 / Node.js 22.4.0 / Vite 8.1.4 / Webpack 5.109.2 / Next.js 16.3 (Turbopack) / 検証日 2026年7月末