Vite超入門──“爆速”開発を実現する次世代フロントエンドツールチェーン徹底ガイド

techgrowup — Sun, 27 Apr 2025 17:00:00 +0000

Viteとは何者か

Vite（ヴィート）は、Vue の作者 Evan You が開発したフロントエンド開発ツールです。「速さ（vite=仏語の“高速”）」の名のとおり、従来のバンドラに比べ初回起動やコード更新が桁違いに速いのが特徴です。その秘密は ES モジュールを生かしたオンデマンド変換と、本番ビルド時に Rollup を用いる二段構えのアーキテクチャにあります。

旧世代ツールと何が違う？

項目	Webpack	Vite
開発サーバ起動	数十秒〜数分	1〜2 秒
HMR更新	0.5 秒以上	30〜50 ms
設定ファイル	必須	ゼロコンフィグでOK
バックエンド	Node.js + Webpack	Node.js + esbuild + Rollup

Vite は依存ライブラリを esbuild でプリバンドルし、ソースコードはリクエストされた瞬間だけトランスパイルするため、「保存→ブラウザ反映」の待ち時間がほぼ消えます。

インストールとプロジェクト初期化

npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev   # http://localhost:5173

対話プロンプトで Vue、React、Svelte、Solid、Lit など好きなテンプレートを選べます。後からライブラリを追加しても問題ありません。

ディレクトリ構成の基本

my-vite-app/
├─ index.html       ← エントリーポイント
├─ vite.config.js   ← 必要になったら作成
├─ src/
│  ├─ main.js
│  └─ App.vue / App.jsx
└─ public/

index.html を Vite が解析し、自動でモジュールグラフを生成します。

開発サーバとホットリロード

npm run dev を実行すると開発サーバが起動し、以下を行います。

依存ライブラリを esbuild でプリバンドル
ソースをオンデマンド変換してブラウザへ配信
変更検知で該当モジュールだけを HMR で差し替え

Vue SFC、React Fast Refresh、Svelte HMR などが公式プラグインでサポートされ、状態を保持したまま UI が瞬時に更新されます。

本番ビルドと最適化

npm run build
npm run preview

Rollup がコード分割・ツリーシェイキングを行い、dist/ にハッシュ付きファイルを出力します。画像は 4 KB 未満なら自動で Base64 インライン化されます。

プラグインエコシステム

@vitejs/plugin-react – React + Fast Refresh
@vitejs/plugin-vue – Vue 3 SFC 対応
vite-plugin-pwa – 数行で PWA 化
vite-plugin-legacy – 古いブラウザ向けフォールバック

プラグインは vite.config.js の plugins 配列に追加するだけで機能します。

環境変数とモード

.env ファイルに VITE_ プレフィックスを付けて記述し、import.meta.env.VITE_API_BASE のように参照します。モードは development / production などが自動判定され、import.meta.env.MODE で取得できます。

主要フレームワークとの統合

React

npm i -D @vitejs/plugin-react

JSX 変換と Fast Refresh が自動有効。TypeScript も即利用可能。

Vue 3

npm i -D @vitejs/plugin-vue

.vue ファイルと

ESBuild