👯

フロントエンドタスクをBunで実行してみた

2024/04/12に公開

はじめに

初めまして! フロントエンドエンジニア、kyonsiと申します。
好きなCSSのプロパティは text-overflow、JavaScriptで気に入っている関数は toLocaleString です。

最近、開発に伴う待ち時間が非常にストレスとなっています。
特にLintやFormatter、Testといったフロントエンドタスクの実行は頻繁に必要とされるにも関わらず、実行時間の長さが辛いです。
この状況が続くと、タスクの実行を待つ間にSNSやYouTubeを見てしまいがちです。
そこで、高速と評判のBunを使ってタスクを高速化できないか検証してみることにしました。

Bun とは

https://bun.sh/

Bun は JavaScript や TypeScript 用のオールインワンツールキットです。 他のランタイムやパッケージマネージャーと比較して、その高速性が特徴です。
特にパッケージのインストール速度の速さで注目されています( bun install を導入しているプロジェクトも多いですね)。
さらに、TypeScriptをデフォルトでサポートしており、コンパイルなしで使用できる点も魅力の一つです。

Bunでタスクを実行してみる

アプリケーションの実行やビルドにBunを使用するのはまだ検討段階ですが、品質に直接影響しないLintやPrettierなどのタスクについては試してみる価値があると考えました。

bun runコマンドでnpm runと同じようにpackage.jsonに定義されたスクリプトやパッケージを実行することができます。
Bunはシェバング(#!)を尊重してスクリプトを実行しますが、--bunフラグでこの動作を上書きできます。
これにより、Node.jsベースのCLIもBunで実行できます。
https://bun.sh/docs/cli/run#bun

Lint

筆者が開発を担当するプロジェクトで、Lint と Prettier のタスクを Bun と Node.js のランタイムでそれぞれ実行して、速度を比較してみました。

実行コマンド
bun run --bun lint

結果

Node.js Bun
24.51s 8.83s

Bunを使うことで、実行速度が約1/3に短縮された。かなりの時間節約になります。

Prettier

次に、Prettier タスクを実行してみます。

実行コマンド
bun run --bun prettier

結果

Node.js Bun
19.29s 8.55s

こちらも実行時間が短縮され、約1/2になりました。

まとめ

この検証から、LintやPrettierといったタスクをBunで実行するだけで、大幅に実行速度を改善できることがわかりました。
アプリケーションのランタイムをNode.jsからBunに変更するのはまだ時期尚早かもしれませんが、品質に直接影響しないタスクに関してはBunへの移行を検討しても良さそうです。

特にCIでの実行においては、速度の向上はコストと時間の節約に直結します。
積極的に導入を検討していく価値があると思います。

Discussion