Zenn
🥟

Bun + Vite を試してみる

2023/09/17に公開
Vite
Bun
tech

はじめに

先日、Bun 1.0 がリリースされました🎉
https://bun.sh/blog/bun-v1.0

これまで Bun の動向を追えていなかったのですが、ドキュメントを眺めていたところ、Bun + Vite でビルドする方法が記載されていたので試してみました。
https://bun.sh/guides/ecosystem/vite

また、Yarn + Vite で作成したプロジェクトとの比較もします。

試した環境

  • Bun v1.0.1
  • Node.js v20.5.1
  • Vite v4.4.9

先に結論

install dev(初回) dev(2回目) build
Bun 3.99s 546ms 126ms 385ms
Yarn 19.14s 174ms 117ms 1.11s

Yarn + Vite のプロジェクトと比較すると、依存ライブラリのインストールとビルドは速くなるものの、開発サーバーの起動は遅くなるという結果になりました。特にインストールは約5倍速くなりました。

Bun + Vite の環境構築

Bun + Vite のテンプレートを使用する

bun create vite sample-app を実行して使用するライブラリなどを選択していきます。
今回は React + TypeScript + SWC の構成にしました。

$ bun create vite sample-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in ...

Done. Now run:

  cd sample-app
  bun install
  bun run dev

package.json の npm scripts の部分は下記のようになっていました。

package.json
{
  ...
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  ...
}

依存ライブラリのインストール

bun install を実行することでインストールできます。
インストールにかかった時間は 3.99s でした。

$ bun install
bun install v1.0.1 (31aec4eb)
 + @types/react@18.2.21
 + @types/react-dom@18.2.7
 + @typescript-eslint/eslint-plugin@6.7.0
 + @typescript-eslint/parser@6.7.0
 + @vitejs/plugin-react-swc@3.3.2
 + eslint@8.49.0
 + eslint-plugin-react-hooks@4.6.0
 + eslint-plugin-react-refresh@0.4.3
 + typescript@5.2.2
 + vite@4.4.9
 + react@18.2.0
 + react-dom@18.2.0

 153 packages installed [3.99s]

bun install を実行すると、npm や yarn の時と同様にロックファイルが作られますが、Bun の場合はバイナリ形式になっています。これにより、ロックファイルの読み書きの速度が向上するようです。

In a word: Performance. Bun’s lockfile saves & loads incredibly quickly, and saves a lot more data than what is typically inside lockfiles.

https://bun.sh/docs/install/lockfile

とはいえ、依存関係を確認したい時などにロックファイルを確認したいことがあると思います。
その場合、bun install -y を実行することで、yarn.lock ファイル (v1 互換) を生成できます。

$ bun install -y
bun install v1.0.1 (31aec4eb)

Checked 153 installs across 184 packages (no changes) [18.00ms]

開発サーバーの起動

bun dev を実行することで、開発サーバーを起動できます。
初回の開発サーバーの起動にかかった時間は 546ms でした。

$ bun dev
$ vite

  VITE v4.4.9  ready in 546 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

2回目の開発サーバーの起動にかかった時間は 126ms でした。理由は把握できていないのですが、初回より大幅に短くなっていますね。

$ bun dev
$ vite

  VITE v4.4.9  ready in 126 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ビルドする

bun run build を実行することでビルドできます。
ビルドにかかった時間は 385ms でした。

$ bun run build
$ tsc && vite build
vite v4.4.9 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-35ef61ed.svg    4.13 kB │ gzip:  2.14 kB
dist/assets/index-d526a0c5.css    1.42 kB │ gzip:  0.74 kB
dist/assets/index-c7e05d32.js   143.41 kB │ gzip: 46.11 kB
✓ built in 385ms

Yarn + Vite と比較してみる

ここからは Bun + Vite のプロジェクトと比較してみます。

Yarn + Viteのプロジェクトで計測

テンプレートを使って環境構築

bun との比較が目的なので、同じ構成にしています。

$ yarn create vite temp-project
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /Users/hinokeita/sandbox/vite/temp-project...

Done. Now run:

  cd temp-project
  yarn
  yarn dev

✨  Done in 3.08s.

依存ライブラリのインストール

yarn install にかかった時間は 19.14s でした。

$ yarn install
yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 19.14s.

開発サーバーの起動

初回の開発サーバーの起動にかかった時間は 174ms でした。

$ yarn dev
yarn run v1.22.19
$ vite

  VITE v4.4.9  ready in 174 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

2回目の開発サーバーの起動にかかった時間は 117ms でした。初回と比べると少しだけ短くなっています。

$ yarn dev
yarn run v1.22.19
$ vite

  VITE v4.4.9  ready in 117 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

ビルドする

ビルドにかかった時間は 1.11s でした。

$ yarn build
yarn run v1.22.19
$ tsc && vite build
vite v4.4.9 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB │ gzip:  0.30 kB
dist/assets/react-35ef61ed.svg    4.13 kB │ gzip:  2.14 kB
dist/assets/index-d526a0c5.css    1.42 kB │ gzip:  0.74 kB
dist/assets/index-c7e05d32.js   143.41 kB │ gzip: 46.11 kB
✓ built in 377ms
✨  Done in 1.11s.

インストールにかかる時間を比較

install
Bun 3.99s
Yarn 19.14s

Yarn のプロジェクトと比較すると、約5倍速くなりました。
差が 16s なので、体感でもかなり違いました。

開発サーバーの起動にかかる時間を比較

dev(初回) dev(2回目)
Bun 546ms 126ms
Yarn 174ms 117ms

Yarn のプロジェクトと比較すると、初回の起動は約3倍遅くなりました。
とはいえ、2回目以降はほとんど同じくらいになったので、個人的にはあまり気にしなくて良さそうに感じました。

ビルドにかかる時間を比較

build
Bun 385ms
Yarn 1.11s

Yarn のプロジェクトと比較すると、3倍速くなりました。

全体を比較

install dev(初回) dev(2回目) build
Bun 3.99s 546ms 126ms 385ms
Yarn 19.14s 174ms 117ms 1.11s

最終的にはこのような結果になりました。
Yarn + Vite のプロジェクトと比較すると、インストールとビルドにかかる時間は速くなるものの、開発サーバーの起動は遅くなりました。

おわりに

今回は Bun + Vite を試すのと、Yarn + Vite のプロジェクトとの比較をしました。
特にインストールにかかる時間を大幅に短縮できそうなので、CI 辺りから Bun に置き換えるのを試してみたくなりました。

参考

Discussion