wsl2が異常に遅くてホットリロードも効かないとき

2020/05/08

windows 上で Linux 環境を用意できるWindows Subsystem for Linux(wsl)便利ですよね。僕は現在 windows 機しか手元にないためよく利用しています。

そんな便利な wsl ですが、最近 wsl2 という新しいバージョンのアーキテクチャが正式リリースされました。そこでさっそく既存の wsl1 から wsl2 に乗り換えたのですが、異常に遅くなったりホットリロードまで効かなくなったりとで少々手こずりました。ここではその忘備録を残します。

最初に結論

wsl 上で React アプリの作成をしていたのですが、wsl2 にしたところビルドが異常に遅くなったりホットリロードが効かなくなったりしてしまいました。

これは、

Windows ファイルシステム上(/mnt/c配下)で作業している

が原因でした。

wsl2 では Windows ファイルシステムへアクセスする方法が9Pというプロトコルに変更されています。どうやらこの変更が影響しているようで、9P はアクセス速度が遅くまたファイル監視も上手く機能しないようです。僕は winodows 側からでも作業しやすいように/mnt/cで作業していたためはまりました...

あちなみにですが、ホットリロードが効かなくなるのはvueも同様なようです。

対策

対策というほどのことではないですが、

Linux ファイルシステム上で作業する

ようにすれば ビルドはもちろんホットリロードもしっかり動作するようになります。むしろ wsl1 より快適になると思います。

#4417でも、

If you're experiencing this issue please place your files in the Linux root file system and run from there, if you are still experiencing this issue after that then please feel free to comment here or reopen. Thank you! :)

とのことなので Windows 側のファイルを Linux 側に引っ越しましょう。

検証

せっかくなので検証してみます。 Windows(/mnt/c)および Linux(~) ファイルシステムで Create React App のビルド時間と開発サーバーのホットリロードが動作するか見てみました。

環境

ざっくりとした環境は

OS Windows 10 home, version 2004
WSL VERSION 2, Ubuntu-18.04
Node v10.16.0
Create React App   3.3.0

です。Create React App は例えば、
npx create-react-app my-app

ではいります。

結果

Windows   Linux
Build Time 153.37s 11.75s
Hot-Reload   🙅 🙆

Windows 側で環境構築するとLinux 側に比べてビルドに10 倍以上の時間を要していました。明らかに遅い!

さいごに

9P によるファイル監視機能の追加に関する issue は立てられてるみたいなので、もしかしたら将来的には Windows 側からもホットリロードが利用できるようになるかもしれません。

とはいえ、wsl2 では極力 Linux 側で作業するようにした方が良さそうです。まあそりゃそうだ。

参考

logo

たまおさ

釣りとか登山とか好きです。(@tamaki_osamu)