Zenn
🙆

Rust製Vite組み込みビルドツールRolldownを試す

に公開
Rust
TypeScript
esbuild
Vite
tech

Rollupの反対でRolldownなのか？

仕事でフロントエンドを扱うとき、
ビルドツールにviteを使う機会は非常に多い
viteはvuejsのビルドツールと思われがちだが、
どの構成でもプラグインでビルドできるうえ、
esbuildベースなので速度も速い

ただ、フロントの規模が大きくなっていくと、
esbuildのGo実装に限界が見えてくる
現状仕事ではビルドに１０～３０秒かかるので微妙にストレスだ

そこでviteに組み込む方向でRustベースのrollupを開発されていたものを試してみた
それが rolldown
そして一年ぐらい経ってそれがviteに組み込まれる動きになった

https://voidzero.dev/posts/announcing-rolldown-vite

It is a drop-in replacement, as Rolldown will become the default bundler for Vite in the future.(将来的にはRolldownがViteのデフォルトのバンドルとなるため、このバンドルはドロップインで置き換えることができる。)

ということで一端どんなもんか試して、
使い物になるかは確認しておく

結論から書くとビルド時間で３倍、
実行時間で２倍ほど差が出た

ビルドツール ビルド計測 time計測
Vite built in 1.76s Executed in 2.37 secs
Rolldown-Vite built in 530ms Executed in 1.23 secs

これは結構期待が持てそう

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

プロジェクトをクローン

さすがに実際使っているプロジェクトは見せられないので、
(ビルド時間ぐらいは可能だが)
適当なプロジェクトを探してみた

ということで以下をサンプルにしているものを勝手に使わせてもらった
(ライセンスは MITだからいいよね)

https://github.com/zhixiangyao/vite-react-ts-starter

git clone https://github.com/zhixiangyao/vite-react-ts-starter sample
cd ./sample
bun i

通常ビルド

一端普通にビルドしてみる
デフォルトでは圧縮プラグインが搭載されているので、
これはいったん外すことにした

package.json
  plugins: [
    React({ jsxImportSource: '@emotion/react' }),
    checker({ typescript: true }),
-     viteCompression(),
    tailwindcss(),
  ],

また tsc によるチェックも今回は関係ないのでvite buildを直接実行
(こっちは tsgo とかでまた別途評価記事にしてみたい)

ビルド実測

通常ビルド
time bunx vite build
***
dist/assets/index-ChjM78To.js                      289.39 kB │ gzip: 94.49 kB
✓ built in 1.76s

________________________________________________________
Executed in    2.37 secs    fish           external
   usr time    3.15 secs  411.00 micros    3.15 secs
   sys time    0.29 secs  319.00 micros    0.29 secs

rolldownビルド

ではrolldown-viteに差し替えてビルド実行してみる

package.jsonを以下のように調整

package.json
  "devDependencies": {
    "typescript": "5.8.3",
-    "vite": "6.3.2",
+    "vite": "npm:rolldown-vite@latest",
    "vite-plugin-checker": "0.9.1",
  },

インストールコマンドを実行

bun i

ビルド実測

では再度実行してみる

通常ビルド
time bunx vite build
***
dist/assets/index-C4RDqq3r.js                                  173.23 kB │ gzip: 54.57 kB
✓ built in 530ms

________________________________________________________
Executed in    1.23 secs    fish           external
   usr time    1.56 secs    1.28 millis    1.56 secs
   sys time    0.18 secs    0.00 millis    0.18 secs

(ΦωΦ) はっや!?

実行時間ベースで２倍ほど差が出ている
まだ規模が小さいから実感しにくいが
１０秒かかったのが５秒になったのならかなり大きな差になる

(・ω・) ええやん

------------------- ↓ 後書きはここから ↓-------------------

Rustベースのビルドツールには RsPackやSWCなどがあるが、
それらとの比較も今後やってくかも

watchモード

現状(令和7年6月2日時点)、watchモードがうまく機能していない模様
なのでwatchモードで使用したい場合は代替案が必要
watchexecを使えば同等のことができそう

brew install watchexec
watchexec --exts ts,scss,json bunx vite build

Discussion