Vite 6 の Rolldown ネイティブビルドに切り替えたら、開発サーバーの起動がかなり速くなった話

💡 結論から

Vite 6 で試験的に導入された Rolldown ビルドモードを、仕事のプロジェクトで試してみました。

結果から言うと、HMR（ホットモジュールリロード）の起動が体感できるほど速くなりました！

設定変更は vite.config.ts に 1 行追加するだけです。

試した当時は experimental な機能でしたが、その後 Vite 8 で Rolldown が正式に標準バンドラーとして GA され、Rolldown 自体も1.0安定版になりました。今からVite 8系を使うなら、特別な設定なしで最初からRolldownの恩恵を受けられます(^^)

👀 Rolldown とはなにか

Rolldown は、Rollup を Rust で再実装した高速バンドラーです。

従来の Vite は、開発サーバーには esbuild を、本番ビルドには Rollup を使い分けていました。

この構成には課題があって、「開発で動くのに本番でだけ挙動が変わる」という問題が発生することがあったんですよね(・_・;)

Rolldown はその問題を解消するために設計されており、開発・本番の両方で同一バンドラーを使える点が特徴です。

Vite チームは将来的に Rolldown を Vite のメインエンジンにする計画を持っていて、Vite 6 時点では experimental オプションとして試せる段階でした。それがVite 8 で正式に標準バンドラーとして採用され、計画どおりデフォルトエンジンになっています。

🔧 Rolldown モードへの切り替え方

vite.config.ts に以下の設定を追加するだけです。

import { defineConfig } from 'vite'

export default defineConfig({
  experimental: {
    enableNativePlugin: true,
  },
})

Vite 6 以上であればこれだけで Rolldown が有効になります！

あとは普通に npm run dev や npm run build を実行するだけでOKです。

プラグインの互換性については、Rollup 向けプラグインはほとんどそのまま動くことが多いです。

一部で相性問題が出ることもあるので、動作確認を念入りにしてから段階的に導入を進めるのが安全です(´･ω･`)

✨ 使ってみた感想

TypeScript + React 構成の中規模 SPA（ファイル数 200 超）に実際に導入してみました。

HMR の起動が体感で 30〜40% ほど速くなった印象！

「ファイルを保存してからブラウザに反映されるまで」のタイムラグが明らかに短くなって、開発のテンポが上がりました。

本番ビルドも若干速くなりましたが、HMR ほど劇的な差はなかったです。

まだ experimental 段階なのでプラグイン依存のプロジェクトには要注意ですが、将来のデフォルトエンジンになることを考えると今のうちに慣れておくのは悪くない選択だと思います。

個人的には開発体験が明確に改善したので、対応プロジェクトであれば積極的に試す価値があります(^o^)/

🧩 プラグイン互換性でつまずいたポイント

「プラグインはほとんどそのまま動く」と書いたんですが、正直に言うと1つだけハマったプラグインがありました。

SVGを最適化しながらインポートするタイプのプラグインで、Rollup の特定のフック（ビルド中の内部処理のタイミング）に依存した実装になっていて、Rolldown 上ではそのフックの呼ばれ方が微妙に違ったらしく、ビルド後に一部のSVGが最適化されないまま出力される、という現象に遭遇しました(・_・;)

原因の切り分けに時間がかかったので、同じようにプラグイン由来の不具合を疑うときのチェック手順をメモしておきます。

まず experimental.enableNativePlugin を一時的に false に戻して、Rollupモードで同じ現象が起きるか確認する
起きなければRolldown側の互換性問題、起きればプラグイン自体の設定ミスと切り分けられる
疑わしいプラグインだけ最新版に上げてみる（Rolldown対応版がリリースされていることがある）

私のケースは3で解決して、プラグインの新しいバージョンで直っていました。

Vite 6時点のexperimental機能だったこともあり、プラグイン側の対応が追いついていないケースはまだ残っていたので、「動かない」と思ったらまずプラグインの更新を疑うのがコツだと学びました。

現在はVite 8でRolldownが標準になっているぶん、主要なプラグインの対応も当時よりかなり進んでいるはずです。

パパ系Webエンジニア〜愛用ガジェット一覧 🛍️

この記事を書いている作業環境のガジェットを楽天ROOMにまとめています ✨ 在宅エンジニアのデスク作りの参考にどうぞ 🙌

🙌 まとめ

Rolldown は Rust 製の高速バンドラーで、Vite 6 時点では experimental として使えた
vite.config.ts に 1 行追加するだけで切り替えられる（当時）
HMR の起動が体感できるほど速くなる
現在は Vite 8 で標準バンドラーとして GA 済み、Rolldown 自体も1.0安定版
Vite 8 系にアップグレードするだけで、特別な設定なしにこの恩恵を受けられます！

まだ Vite 6/7 系を使っているプロジェクトがあれば、Vite 8 へのアップグレードを検討してみてください🙌

※ Vite・Rolldownのバージョンや対応状況は今後も更新されます。最新情報は Vite公式ドキュメントをご確認ください👀