Viteをわかりやすく解説
WebpackやCRAのような古いツールは、まずプロジェクト全体をバンドルすることで動作します。これらはすべてのファイルを読み込み、それらを一つの大きなJavaScriptファイルにまとめます。これは小規模なプロジェクトには適していますが、数千のモジュールを持つ大規模なプロジェクトではうまくいきません。大きなバンドルは、ビルドに数秒から数分かかります。ファイルを保存するたびに、ツールはバンドルの大部分を再ビルドします。
Viteは仕組みが異なります。モダンなブラウザはES modulesをネイティブにサポートしています。Viteは開発中にコードをバンドルしません。ブラウザが要求したときにのみ、各ファイルを個別のモジュールとして提供します。
ビュッフェ形式のレストランを想像してみてください。シェフは開店前にすべての料理を作ります。もし何か少し変更したくなったら、シェフはビュッフェの大部分を作り直さなければなりません。料理が出るまで長い時間待つことになります。これがWebpackの仕組みです。
次に、アラカルト形式のレストランを想像してみてください。お店はすぐに開店します。あなたは一品料理を注文します。シェフはその料理だけを用意します。後でデザートが食べたくなったら、シェフはデザートだけを用意します。メニュー全体が完成するのを待つ必要はありません。これがViteの仕組みです。
Viteは、2つの異なるニーズに対して2つの異なる戦略を使用しています。
開発 (vite dev)
- 戦略: バンドルせずにネイティブのESMモジュールを提供。
- スピード: 一瞬。プロジェクトの規模に依存しません。
- 理由: ローカルネットワークのリクエストは高速だからです。
本番環境 (vite build)
- 戦略: Rolldownを使用してすべてをバンドル。
- スピード: プロジェクトの規模に依存します。
- 理由: 数百もの個別のファイルがあると、実際のユーザーにとってHTTPリクエストが多すぎることになります。バンドルすることで、最終的なサイトをユーザーにとって高速化できます。
Viteは、コーディング中のスピードと、リリース時のパフォーマンスの両方を提供します。