前回記事を書いたときは軽く使ってみるくらいでしたが 特に大きな問題もなく 最近では内部で Vite を使ってるものも増えてるようなので 新規に作るときや CRA を使った既存のものを触るときは Vite に置き換えることにしました

簡単なもので試していたときは速いと感じていましたが ある程度大きなものだと結構時間がかかります
10 秒以上も待つことになると 別のことを始めてるので速度の速さを感じることはあまりないです

env ファイルの変更を監視してくれる

CRA に比べて嬉しいことは Vite は環境変数ファイルを書き換えたときなども自動で反映してくれます
CRA はしてくれないのでたまに再起動を忘れてなぜか変わってないと思うことがあったので地味に助かります
CRA はドキュメントにちゃんと記載はしてるのですが .js ファイルを監視してるのなら env ファイルも監視して再起動するようしてほしいです

env ファイルの優先順位

他に環境変数関係では 優先順位に違いがありました

CRA ではこういう順番です
https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used

development:
	.env.development.local
	.env.local
	.env.development
	.env

production:
	.env.production.local
	.env.local
	.env.production
	.env

test:
	.env.test.local
	.env.test
	.env
	(.env.local は無視)

Vite ではモード問わずこの順です
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/env.ts

.env.[mode].local
.env.[mode]
.env.local
.env

全体を対象にする .env が一番優先順位が低く development や local がつくと優先順位が上がり両方ついたものが最優先となるのは同じです
違うのは .env.development と .env.local のどっちを優先するかです
CRA では local を優先しますが Vite ではモードを優先します

CRA ではローカル全体での設定を変えたくて .env.local を使うことがありましたが Vite では全体の development のほうが優先されるので .env.development がある場合は CRA では動いていたものが Vite では動かなくなります
Vite ではモードごとにローカルの env ファイルを作るほうが良さそうです

ページのリロードが重い

Vite では開発時は ESM で個別にファイルをダウンロードします
node_modules の中はパッケージごとにバンドルされてるようですが それでもパッケージが多かったり アプリ内のファイル数が多いとリロード時に 100 以上のダウンロードが発生して 5 秒以上待たされるようなこともあります

この点では CRA のほうがリロードが速くてよかったです
HMR があっても リロードした初期状態からの動きを確認するためにリロードすることは結構ありますし

過去のが残る

HMR の仕組みのせいなのか ときどき古いバージョンの動作が残っていたりします
debugger を配置したあとに削除してもなぜか停止することがあったりします

確認したのは React のプロジェクトなので React 側によるものの可能性はあります
CRA では気にならなかったのも CRA は React 専用なので HMR の調整がされていたりするのかもしれません

ページが反応しないことがある

HMR によるものなのかしばらくエディタを触っていて ブラウザを操作しようとしたときに反応しないことがあります
主にページ移動なので ルーターライブラリと HMR の相性なのかもしれません

思ったより問題が起きなかった

もっといろいろうまく動かないとか起きそうと思っていましたが 現状上に書いたところくらいしか気になる点はなかったです
どれもマイナー気味なものですし Vite で問題なさそうです