Viteとは

Vite (フランス語で"速い"という意味) は、新しいフロントエンドビルドツールです。
主な目的は、開発サーバーの高速な起動とモジュールのホットリロードを実現することです。

Viteを使うメリット

• 開発サーバーの起動が非常に高速
• モジュールのホットリロードが即時に行われる
• 本番ビルドも高速
• Webpackに比べて設定が簡単
• プリバンドルされたデータを利用し、高速なHMRを実現
• ロールアップをベースとしているため、最新のブラウザとNode.jsの機能を利用可能

Webpackとの比較

Webpackは長年にわたり主流のビルドツールでしたが、大規模なプロジェクトでは起動が遅く、ホットリロードの応答が遅くなる傾向がありました。また、設定が複雑になりがちでした。

一方、Viteは開発サーバーの起動が非常に高速で、モジュールのホットリロードもスムーズに行われます。設定も比較的シンプルです。本番ビルドの速度も高速化されています。

インストールして実行してみよう

まずはインストール

npm

npm create vite@latest

yarn

yarn create vite

インストーラーの質問に答えると、新しいViteプロジェクトが作成されます。

開発サーバーを起動

プロジェクトディレクトリに移動し、次のコマンドを実行します:

npm

npm run dev

yarn

yarn dev

ローカルサーバーが起動し、アプリケーションが自動的にブラウザで開きます。

参考