ViteでビルドしているプロジェクトでBunを使ってみる

bunが速いらしいと色々なところで目にしてはいたのですが、導入面倒ならそこまでモチベーションあがらないかなと思って調べていませんでした。

BunでViteを動かすが簡単だというのを見かけたので、少し試してみたら簡単だったので、記録を残しておきます。

Bunのインストール

既存プロジェクトにひとまず入れてみる想定でいくと、npmでインストールできるのが手軽でうれしいです。

npm install -D bun

もちろん、Nodeを使わずに最初からBunを使うのであれば、別の手順でBunをインストールすればよいかと思います。

package.jsonを編集してscripts.buildのコマンドを変更します。

   "scripts": {
     # ...
-    "build": "vite build",
+    "build": "bunx --bun vite build",

既存のCIなどに影響させず、ひとまず入れてみるだけなので、起動はnpmから実施することにしてみました。

ビルドのコマンドは今まで通り。

npm run build

これでbunx経由でviteが動作しました。

手元のプロジェクト2つで試してみましたが、Bunを使った場合はビルド時間が2割程度減少していました。

ビルド後のjsファイルはbun導入前と同じ内容であることを、diffコマンドで調べて確認しました。

ビルド結果が同じならば、手軽に導入できるし、ありかもしれませんね。