Node.jsからBunに移行してみた

つい先日、ポートフォリオとブログをNode.jsからBunに移行しました。
今回はその移行作業について書いていきます。

Bunとは

JavaScriptのランタイムとしてNode.jsが主流ですが、Bunはその代わりとして登場しました。
BunはZig言語で書かれており、Node.jsよりも高速でメモリ効率が良いとされています。
2023年の9月に安定版がリリースされました。

移行した理由

1. マスコットキャラクターが可愛い

これが一番の理由です。

2. パフォーマンスは高いほうがいい

BunがZigという低レベルのプログラミング言語で実装されているため、Node.jsと比較して起動時間や実行速度が向上している。

3. オールインワン

バンドラ、トランスパイラ、タスクランナー、npmクライアントなどが組み込まれている。

4. Node.jsとの互換性

BunはNode.jsのAPIをサポートしているため、Node.jsのコードをそのままBunで実行することができる。

5. 依存関係の削減

元々入っている機能が多いため、外部の依存関係を減らすことができるらしい。

Node.jsの後発で上位互換という印象です。
ですが、登場して間もないため、安定性やサポートの面で不安が残りますね。

大きなプロジェクトには怖くてまだ使いたくはありませんが、今回はあくまでも個人のプロジェクト。
最悪止まってもそこまで困らないので、移行してみることにしました。

今回は私が個人で運用していて、尚且つ最悪止まってもOKな以下のプロジェクトを移行しました。

• このブログサイト
• ポートフォリオサイト

どちらのサイトも既に移行済みです。

移行作業

1. Bunのインストール

curl -fsSL https://bun.sh/install | bash

2. Node.jsの依存関係を削除

rm -rf node_modules

3. 依存関係のインストール

bun install

or

bun i

4. プロジェクトのビルド

bun run build

詳細は公式ドキュメントをご確認ください。

これだけでも動きはしましたが、使っているFWに応じて適宜対応が必要です。
今回移行したプロジェクトはどちらもAstroを使っています。

Bunをランタイムとして開発サーバーを起動するには、以下のコマンドを実行します。

bunx --bun astro dev

ビルドやプレビューも同様です。

bunx --bun astro build
bunx --bun astro preview

一度ビルドしてみて、問題がないか確認しましょう。

ここまで問題なさそうであれば、もうpackage.lockは不要です。
Bunの場合はbun.lockが生成されるため、package.lockは削除しても問題ありません。

私の場合はVercelにデプロイしているので、Vercel側のデプロイ時のコマンドも変更しました。

移行後初のnpm run devでは、ホットリロードが効かなくなる症状がありましたが、node_modeulesを削除して再インストールすることで解決しました。

変更後の変化

これで移行作業は完了です。
早速ビルド時間を比較してみました。

• Node.js

  20:38:25 [build] 23 page(s) built in 2.60s
  20:38:25 [build] Complete!
  

• Bun

  20:37:57 [build] 23 page(s) built in 2.20s
  20:37:57 [build] Complete!
  

んまぁ、体感できるほどの差はないですね。
何度か試しましたがBunのほうが0.4秒程度早い程度でした。

開発サーバーの起動速度やホットリロードの速度についても、特に差は感じられませんでした。
今後記事が増えていくと、その差が顕著になるかもしれません。

不都合が出ない限り、今後もBunを使っていこうと思います。

まとめ

今回はNode.jsからBunに移行する作業について書いてみました。
作業自体は簡単で、時間もそこまでかかりませんでした。

まだ恩恵を受けるほどの差は感じられませんが、新しい技術のキャッチアップとしては良い機会だったと思います。

新たな発見を見つけ次第、また記事にしていきたいと思います。