ViteでReactプロジェクトを作ってどれくら速いのか確認してみた

開発環境・ツール

2022.05.01

もうすでに話題になって結構たちますが、従来のビルドツールよりも爆速と言われてるViteを使ってReactプロジェクトを作ってみて、使い方の確認も含めてどれくらい速いのか確認してみました。（私の年期の入ったMacbook Proでやってみます）

もうすでにやってる人は体感してることでしょうけども、私は新しいツールってちょっと使い始めるのが遅いので今になってやってみました。（早期に利用して人柱になってトラブルが発生したとき、復旧作業で上手くやれる自信もないですしねw）

Viteの使い方 – Reactプロジェクトを作ってみる

Viteの公式サイトはこちらです。

「ヴィート」と読むようですが、慣れません。バイト、ヴィーテって読んでしまいます。

このページの[Getting Started]をクリックして、スクロースすると、[Scaffolding Your First Vite Project]という項目にプロジェクトの始め方が掲載されています。

次の３つの方法のいずれかのコマンドを、Macのターミナルから実行します。

Node.js version >=12.2.0 が予めインストールされている必要があります。（現在の私の環境では、v16.14.0を使っています。）

// With NPM:
% npm create vite@latest

// With Yarn:
% yarn create vite

//With PNPM:
% pnpm create vite

私は、npmを使ってプロジェクトを作ってみようと思います。コマンドを実行したら、後は画面の指示に従うだけです。

Macのターミナルを起動して、次のコマンドを入力します。

% npm create vite@latest

すると次のように、プロジェクト名を入力するように求められます。

npm create vite@latest
? Project name: › vite-project

ここでは、「vite-react」と入力しておきます。

すると次は、どのフレームワークを利用するか聞いてきます。

? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte

上下キーで選択できます。ここでは「react」を選択します。

すると次のように、そのままの「react」かTypeScripを雛形に含めた「react-ts」を利用するか聞いてきます。

? Select a variant: › - Use arrow-keys. Return to submit.
❯   react
    react-ts

ここではそのまま「react」を選択します。

すると、次のように表示されます。

Scaffolding project in /Users/Kant/Projects/Vite/vite-react...

Done. Now run:

  cd vite-react
  npm install
  npm run dev

プロジェクト自体はあっという間にできたみたいです。

ここで、表示にあるように、cdコマンドでプロジェクトに移動して、npm installコマンドで必要にパッケージをインストールしたあと、npm run devコマンドでサーバーを立ち上げてみます。

すると次のように表示されます。

  vite v2.9.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 584ms.

表示にあるように、http://localhost:3000/ にブラウザでアクセスして、次のように「Hello Vite + React!」のページが表示されてば設定完了です。

create-react-appコマンドで作った雛形とはちょっと違う感じですね。

確かに、Reactプロジェクトの立ち上げは速かったと思います。

ではどれくらい速かったのか、私の環境で時間を測ってみました。

Viteは、上記の「npm create vite@latest」のコマンドを実行してから、ブラウザで立ち上げるまで。上記の流れそのままです。

通常のReactは「npx create-react-app react-app」を実行してから、ブラウザで立ち上げるまで。(ちなみにyarnはインストールしていない形でやっています)

ではどれくらいの時間がかかったでしょうか。

VIte: 1分55秒86

create-react-app: 3分35秒45

操作をのんびりやってるので、毎回こんな感じではないと思いますが、Viteの方がほぼ倍の速さで環境構築ができた感じですね。

では、私はどっちを使うかというと、こだわりは無いですね。気分次第かな。確かにViteは速いですけど、npx create-react-appでのあの時間のかかるボケーっとしたひと時もコーヒー飲んだりトイレ行ったりする時間として有効に使っています（笑）

ViteはsvelteやVueのプロジェクトもできるので、構築の方法であちこち考える必要がなくなるのは便利ですね。

ViteでReactプロジェクトを作るのは、倍くらい速いです。

npm create vite@latestのコマンドをターミナルから実行して、後は画面の指示に従うだけ。

svelteやVueのプロジェクトもできるは便利。