LoginSignup
23
9

More than 3 years have passed since last update.

WSLでホットリロード効かない or コンパイル遅すぎ問題

Posted at

TL; DR

ホットリロード (Hot Module Replacement) を伴う開発をWSL(WSL2)上でするときは /mnt/c/Users/username/home/username にまたがってやりとりしてはいけない.WSL側で実行しているパッケージマネージャー (npm, yarn, webpack など)がマウント先のWindowsシステム側を見に行くとそれがボトルネックになってつらい.

何が起きた

Windows 10 Home で WSL2が使えるし色々機運もあってvueを始めるかということになった.Ubuntu 20.04も入れてWindows Terminal を開き,n => node => yarn => @vue/cli とインスコした.$ vue create hello-world からの $ cd hello-world && yarn serve で開発サーバを立ち上げてみるものの,いっこうに立ち上がらない.まぁ最初はこんなもんかとチュートリアルを見つつ App.vue をいじってみるも一向にページが反映されない(ホットリロードってやつがデフォルトで機能しているのではないのか?).
vue.config.js のwebpack側の設定をいじることで強制的にホットリロードできるように再設定したものの,今度もクソほど遅い.フロントエンドの開発ってこんなにもストレスフルな中で頑張っているのか……(勘違い)

slow_yarn_serve.png

いや1分以上暗い画面眺めさせられる気持ちを考えてくれよ…

試したこと

コンパイルやら変換(bundle?)ってやつが遅いのではないかと思案し,webpack側がおかしいことを疑う. worker memory limit という表示を見かけて,そちらが逼迫しているのかもしれないと思い,どうにか調整する.が,変化なし…….

webpackを高速にする小手先テクニックを探るもほぼ変化なし.

ESLint やら Prettier が悪さをしているのかもしれないと考えた.整形機能は正常に動くし,サクサクなのだが……そもそも雛形のHello-Worldの時点で問題が起きてるのだから,悪さをしているとも考えにくい.う~ん.

原因

WSL側に実行パスがあるのにわざわざマウント先のCドライブ内までファイルを見に来ていたことが原因だった.

Windows TerminalでWSLを開くとデフォルトのディレクトリがwindows側のユーザーホームディレクトリになっている.GUIエディタではwsl上のファイルを編集するのは骨が折れる場面もあるかとおもい ①実行はWSL上 ②ファイル実体はWindowsのCドライブ上 で行なう構成にしていた.

解決

実行環境とファイル実体を同一環境にすればいい.

コマンドプロンプトやPowerShellにnode環境を用意するのは億劫に感じたので,wsl上で実行しwsl上にファイル実体がある構成にすることを考えた.

fast_yarn_serve.png

  • 改善前: 83384 ms
  • 改善後:  346 ms

正直ここまで速度に違いがあるとアホらしくなってしまう.ばかなのか?

新たな問題と解決策

wsl上ですべて行えば問題は生じないということがわかったが,このままではかの有名な emacsやらvimやらで涙を流しながらプログラムを書くことになる.ただでさえ慣れない言語に挑戦しようというのにエディタの使い方まで同時に学ぶのは流石に苦痛過ぎる.

というわけで Vscode (insiders) の Remote - WSL を使うことにした.これがあれば,wsl上のファイルをストレスなく編集できる.emacsやvimに魂を売り渡す必要はなくなる.

参考文献

23
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
9