【ゔぃーと】

Vite とは?

💡 フロントエンド開発を「爆速」にする新世代ツール
📌 このページのポイント
Viteのビルドツールの仕組み 従来のバンドラー 全ファイル → バンドル → 配信 起動が遅い… (全体をまとめてからサーバー開始) Vite(ESM方式) 必要な → ESM配信 → 即時 起動が速い! (必要なファイルだけ即座に配信) Viteの主な特徴 開発: ESM (高速HMR) 本番: Rollup (最適化バンドル) プラグイン (拡張が容易)
Viteのイメージ
ひよこ ひよこ

Viteって何がそんなに速いの?

ペンギン先生 ペンギン先生

従来のWebpackは起動するとき全部のファイルをまとめてからスタートするんだけど、Viteは「今ブラウザが必要としているファイルだけ」をその場で渡すんだ。だから、プロジェクトがどんなに大きくても起動はほぼ一瞬だよ。

ひよこ ひよこ

ES Modulesってどういうこと?

ペンギン先生 ペンギン先生

最近のブラウザは「import」文を直接理解できるようになったんだ。だからViteは開発中、ファイルをまとめずにそのまま渡して、ブラウザ自身に読み込ませるんだよ。まとめる作業を省けるから速いわけだね。

ひよこ ひよこ

じゃあ本番のときはどうするの?

ペンギン先生 ペンギン先生

本番ではRollupというバンドラーを使ってちゃんとファイルをまとめるよ。開発中は速さ重視、本番は最適化重視と使い分けているんだ。

ひよこ ひよこ

Webpackから乗り換える人が多いの?

ペンギン先生 ペンギン先生

新しいプロジェクトではViteを選ぶ人がかなり増えてるよ。Vue.jsの作者が開発したツールだけど、ReactSvelteでも使えるから、フレームワークを問わず人気なんだ。

ひよこ ひよこ

Viteにも弱点ってあるの?

ペンギン先生 ペンギン先生

開発時と本番時で使っているバンドラーが違う(開発はesbuild/ネイティブESM、本番はRollup)から、開発中は動くのに本番ビルドでエラーになるケースがたまにあるんだ。特にCommonJS形式の古いライブラリとの互換性問題は、依存パッケージの事前最適化(dep pre-bundling)の挙動まで理解しないと原因がわからなくて、ベテランでも調査に時間がかかるポイントだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Vite」って出てきたら「Webアプリの開発を速く快適にしてくれるビルドツールだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「vite(フランス語)」 = 速い・素早い
💬 フランス語で「速い」を意味する言葉。その名の通り起動が爆速だよ
← 用語集にもどる