Viteを使ってみたら爆速だった件～Turbopackも添えて～

はじめに

こんにちは。エンジニアのかきびぃです。
入社して3か月、初ブログなのでドキドキしております。

Reactで開発をする際、フロントエンドのビルドツールって何を使ってますか？
私はwebpackを使っていたのですが、規模が大きくなるにつれ「遅い・・・遅い・・・」と感じるようになってきました。
そこで、爆速だと話題のViteを使ってみての所感などをまとめてみました。
（Viteと比較されるTurbopackも添えています）

この記事はこういう方にオススメ

Viteってホントに爆速なの？と思っている方

Vite

Viteとは

Vite（ヴィート）とは、Vue.jsの作者であるEvan You氏が作ったフロントエンド用開発ツールですが、Vueだけでなく、ReactやSvelteなど多数のフロントエンド・ライブラリー／フレームワークに対応した開発ツールです。

State of JS 2022のビルドツールランキングで2021年からトップになっています。

なぜ早いのか？

• 開発環境の構築に、Go言語で開発されたesbuildを使っている
• ネイティブESMを利用している

といったことが理由のようです。

サンプルアプリで時間比較

実際にサンプルアプリを作り、webpackとViteで速度比較をしてみようと思います。

サンプルアプリ

「PokeAPI」なんてものがあるのを最近知ったので、それを使ったポケモン図鑑にします。
ビルド時間比較用のサンプルアプリなので、

Reactチュートリアル1：犬画像ギャラリーを作ろう (zenn.dev)

これをベースにfetch先をPokeAPIに変えて加工しました。

機能は、以下の通りシンプルなものです。

• ポケモン一覧を表示
• 対象ポケモンをクリックすると、モーダル画面で詳細を表示

ビルド時間比較結果

webpack、Viteそれぞれ用にDockerでコンテナを作り、上記サンプルアプリをビルドして完了までの時間を測定。
webpack, Vite両ツールともに２回目以降は初回で作成したキャッシュファイルを使うので別に測定しました。

Viteはやはり爆速でした！

Turbopack

Turbopackとは

TurbopackはVercelによって開発が進められているバンドラーです。
TypeScriptとJavascriptに最適化されています。
WebpackやBezelに影響を受けており、Rustでできたこの製品はNextjs13からβ版をためすことができます。

Viteより早い？

公式サイトには、Viteより早いというベンチマークが出ています。

どうして早いの？

「関数レベルのキャッシュ」と「リクエストレベルのコンパイル」の二つの仕組みを用いているようです。
詳細は詳しく書いてあるサイトがあったので、そちらを見てください。

サンプルアプリで時間比較！

ほんとに早いのか？ということで、先ほどと同じサンプルアプリでNext.js(v 10)とTurbopackのビルドして完了までの時間を測定。（同じくキャッシュ考慮で2回測定）

起動だけで見ると「Turbopackめっちゃ早い！」と感動したのだけれど、アドレスにアクセスして画面が描画されるまでに時間がかかりました。

※Dockerで動作しているので、それが影響している可能性はあり。

今回の環境では画面描画完了までで考えると、爆速順位は下記のようになります。

２，３はNext.js内でwebpack使ってるので同じですね。

まとめ

今のところはトータル的に見てViteが爆速ということがわかりました。
Turbopackは、まだβ版なので本番ではまだ使えないといった情報もあります。今回は体感的に「早い！」とは感じなかったのですが、正式版が出るころにはその辺が解消されて爆速になっている可能性もありますね。

ネットオンではNext.jsで開発をしているので、Turbopackに期待です。