Docker環境のViteでHMRが動かない、または遅い場合の対策

作成日時：2025-01-28
更新日時：2025-01-28

背景

Docker上でViteのHMRが動作しなかった。
動作するように修正したが、CPU使用率が常に100%となり使い物にならなかった。

仕事にならなかったので、改善策を調査した。
(環境はWindows11, WSL2)

結論

サーバーオプション#server.watch | Vite に記載されていた。

ViteをWSL2上で実行する場合、ファイルシステム監視が動作しない。
そのため、ポーリング形式で監視させる。

監視対象が多かったり、監視間隔が短い場合、CPU使用率が高くなる。
したがって、上記のチューニングを行う。

設定例

設定例は下記。(vite.config.jsとpackage.json)
設定内容の詳細に関しては公式資料を参照されたし。

設定値は各自調整すること。

vite.config.js

• サーバーオプション | Vite
• paulmillr/chokidar at 3.6.0

export default defineConfig({
  server: {
    hmr: {
      host: 'localhost', // HMR用のWebSocket接続のホストの指定
      overlay: false     // コンパイルエラー発生時のオーバーレイ表示の制御
    },
    watch: {
      // 不要なファイルを監視対象から除外
      ignored: [
        '**/node_modules/**',
        '**/dist/**',
        '**/.git/**',
        '**/vendor/**'
      ],
      usePolling: true,     // ポーリングを有効化
      interval: 5000,       // ポーリング間隔
      binaryInterval: 10000 // バイナリファイルのポーリング間隔
    }
  }
});

package.json

viteにhostオプションを追加する。
必要ないかもしれないが、私の環境ではこれが無いと動かなかった。

• サーバーオプション | Vite

{
  "scripts": {
    "dev": "vite --host"
  }
}

メモ

初回アクセス時は遅い。CPU使用率は100%近くになった。
暫く待てばCPU使用率は下がり、変更が適宜画面に反映された。