Vite とは？

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

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

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

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

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