PR TIMES、ReactページのビルドをWebpackからViteへ段階的に移行。フィーチャートグルで本番試験し、ビルド時間は3~4分から30秒に

PR TIMESでは、いくつかのページがReactで実装され、Webpackでビルドされていた。HTMLの配信はバックエンドサーバーが担い、フロントエンドとバックエンドのリポジトリは分かれている。最大の課題はビルド時間の遅さで、本番用のビルドはおおよそ3~4分、開発環境でのwatchビルドで変更が反映されるまで30秒~1分かかっていた。開発環境の改善のために一度esbuildが導入され、watchビルドは1秒以内に終わるようになったが、esbuildにはHMRの機能が組み込まれておらず、作者も本体に実装する予定は少なくとも直近ではないと明言していた。そのため変更のたびに画面のリロードが必要で、複数ステップのフォームやモーダルのUI変更では状態が失われてしまう。開発環境ではリロード自体に数秒かかる場合も多かった。さらに、Webpack founderのsokra氏がVercelで後継のTurbopackの開発に取り組んでいるなど、Webpackが新しい課題に応える開発を積極的に進める雰囲気ではなさそうなことも移行を後押しした。

移行は以下の順序で段階的に進められた。

• 開発環境への導入: esbuildのwatchビルドをVite dev serverに置き換え。HTMLをバックエンドが配信する構成のため、ViteのBackend Integrationのガイドに従いjsをエントリポイントにし、バックエンドのテンプレートに必要なscriptを追記。環境変数はvite-plugin-environment、CSSはemotionの設定を実施
• プロダクションビルドの調整: バックエンドでmanifest.jsonを参照する構成を避け、エントリファイル名を[name].jsに固定。キャッシュ対策はデプロイごとに更新されるIDをクエリパラメータで付与する既存の仕組みを利用
• パフォーマンス確認: バンドルサイズは1%程度増、Web VitalsはLCPが微増、他は変化なし
• デプロイjobへの組み込み: ステージング・本番のデプロイ時にWebpackとViteの両方でビルドし、成果物を同時にS3へアップロード
• フィーチャートグルでの本番試験: 既存のフィーチャートグルにWebpack – Vite切り替え用のフラグを追加し、社内メンバーのみで本番確認
• 本番リリース: 月に1度のリファクタリングデーでフルリグレッションテストを行い、フラグを外してリリース
• Webpackビルドjobの削除

移行により、開発体験とデプロイ時間が大幅に改善された。

• dev serverの起動: 3~4分 → 1秒未満
• 開発時の変更の反映: フルリロードが必須 → 1秒未満のHMR
• ビルド時間: 3~4分 → 30秒

デプロイjobからWebpack分の3~4分が省略され、ビルドは30秒程度で終わるようになった。ビルド時間の短縮は、フロントエンドのプレビュー環境の自動生成にも大きく貢献している。一方でバンドルサイズは1%程度増え、LCPも微増しており、パフォーマンスだけを見ると改善とは言えないとしている。