7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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に魂を売り渡す必要はなくなる.

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
7
Help us understand the problem. What are the problem?