ここ最近 Vite で軽くアプリ作ってたので感想。

Vite とは？

4行で書くと

こんな感じ。ビルドツールなので、webpack や Rollup と似た役割。特徴は ES Module を前提とした dev server。これのおかげでノーバンドルを実現してる。

Good default だから環境構築が楽

webアプリ開発の速度が上がる。デフォルトのままで CSS や JSON、画像まで import できる。画像を読み込めるの、ヤバすぎない？まさにGood default。web アプリ開発のユースケースをしっかりと押さえてる。

さらに、インストールもカンタン。インストールは質問に3つ答えるだけで完了。とてもスッキリ。環境構築コストがかなり低いので、開発に集中できる。

不必要にディレクトリ構成を縛られたりしない。ディレクトリ名を指定されたりもしない。vite.config.js と index.html を置く以外は何もしなくていい。

webpack から vite に移行したときも、vite.config.js と index.html を追加して package.json 直すだけで行けた。ディレクトリ構成を制限されないのは結構嬉しい。

早い。とにかく早い。Dev server がほんと1秒未満で起動する。最高。これですよ、我々が求めてたのは…という感じ。

ライブラリ作るときにはあまり向かない。てか使う必要がない。ライブラリ作るときにHMRとか要らんし。ライブラリ開発なら素直にバンドラを使う方が良さそう。

React の新しい JSX 変換にはまだ対応してない(将来的にはするらしい)。ここは惜しい。早く対応して欲しいな。

Backend と組み合わせて使うこともできる(つまり Laravel とかでも使える)。かなりエレガントな手法を提供してくれてる。

けど、フロント側のリポジトリとサーバーのリポジトリを分けている場合は難しいかも。というのも、ビルド時に生成される manifest.json というファイルを参照してスクリプトを読み込まなければならない。これをフロント側のリポジトリからどうやってサーバー側に共有するかが課題になりそう。

でも、実際に試した訳じゃないので、エレガントな解決策があるかも。