react-router v6 アプリの起動速度が 10倍 高速化した

こんにちは、Freelance Developer の天海です。

お仕事で関わってるTAIANでやった react-router v6 プロジェクトのパフォーマンス改善したことを紹介します。

起動速度を約10倍まで高速化することに成功しました。

ついでに vite のバージョンアップも行ったことで、ビルド時間も1.53倍高速化されました。

主にやったこと

react-router v6.9.0 からサポートされた Lazy Route Modules を使ってルーティングの遅延読み込みを実現しました。

簡単な記録

1. yarn workspace を使っていたため、ビルド時に react-router のバージョン不整合が発生

→ error message: Matched route does not have an element

解決方法：react-router-dom version 統一

2. Vite 3 の HMR 機能が Lazy Route に正しく対応していなかった

-> error message: {hook} may be used only in the context of a <Router> component

解決方法：Vite バージョンアップ

3. Vite バージョンアップの関連修正

3.1 Vite v7 で Sass のレガシー API が削除された

3.2 Vite の HMR 要件として、.tsx ファイルでは component のみ export しないと HMR が効かない

3.3 vitest v3 では Promise に必ず await を付ける必要がある

参考リンク

• https://reactrouter.com/6.30.1/route/lazy#multiple-routes-in-a-single-file
• https://vite.dev/guide/migration.html#removed-sass-legacy-api-support
• https://github.com/remix-run/react-router/issues/12785

次にやること（Next Actions）

1. トップページでの API リクエスト数を削減し、API キャッシュを導入する
2. API に依存する UI がファーストビューの表示を妨げないように改善する
3. 画像の読み込みを最適化して、さらなるパフォーマンス向上を目指す

以上、最後までお読みいただきありがとうございます。