Docker利用時のReact動作改善(高速化)について

 Dockerを利用していると、ローカルでのコード変更がもっさりすることがあります。 そうした際の動作改善について調査する機会がありましたので、少しここに残しておきます。

ホットリロード有効化

 以下の何れかの方法でホットリロードを有効化する。

• docker-compose.yml
  • environmentにWATCHPACK_POLLING=trueを追加する。
• next.config.js
  • webpackDevMiddleware: config => {},を追加する。

Virtiofsの有効化

 Docker DesktopでVirtioFSを有効にする。ただ、コンテナ内でgit pushがうまくいかないかもしれない。つい先日正式採用されたらしい。

ボリュームマウントチューニング

 docker-compose.ymlでボリュームの末尾に以下の何れかを追記する。

• :consistent
  • 完全な一貫性（常にホストとコンテナが完全に同じ表示）
• :cached
  • 完全な一貫性（常にホストとコンテナが完全に同じ表示）
• :delegated
  • コンテナの表示が信頼できる（コンテナ上の更新がホスト上に反映するまで、遅延が発生するのを許容）

SWCの有効化

 Next.jsのアップグレードを行い、SWCを有効にする。

• v13.0.0 デフォルトでSWCが有効に。
• v12.3.0 SWCの安定版。