フロントエンドタスクをBunで実行してみた
はじめに
初めまして! フロントエンドエンジニア、kyonsiと申します。
好きなCSSのプロパティは text-overflow
、JavaScriptで気に入っている関数は toLocaleString
です。
最近、開発に伴う待ち時間が非常にストレスとなっています。
特にLintやFormatter、Testといったフロントエンドタスクの実行は頻繁に必要とされるにも関わらず、実行時間の長さが辛いです。
この状況が続くと、タスクの実行を待つ間にSNSやYouTubeを見てしまいがちです。
そこで、高速と評判のBunを使ってタスクを高速化できないか検証してみることにしました。
Bun とは
Bun は JavaScript や TypeScript 用のオールインワンツールキットです。 他のランタイムやパッケージマネージャーと比較して、その高速性が特徴です。
特にパッケージのインストール速度の速さで注目されています( bun install
を導入しているプロジェクトも多いですね)。
さらに、TypeScriptをデフォルトでサポートしており、コンパイルなしで使用できる点も魅力の一つです。
Bunでタスクを実行してみる
アプリケーションの実行やビルドにBunを使用するのはまだ検討段階ですが、品質に直接影響しないLintやPrettierなどのタスクについては試してみる価値があると考えました。
bun run
コマンドでnpm run
と同じようにpackage.jsonに定義されたスクリプトやパッケージを実行することができます。
Bunはシェバング(#!)を尊重してスクリプトを実行しますが、--bun
フラグでこの動作を上書きできます。
これにより、Node.jsベースのCLIも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