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側の設定をいじることで強制的にホットリロードできるように再設定したものの,今度もクソほど遅い.フロントエンドの開発ってこんなにもストレスフルな中で頑張っているのか……(勘違い)
いや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上にファイル実体がある構成にすることを考えた.
- 改善前: 83384 ms
- 改善後: 346 ms
正直ここまで速度に違いがあるとアホらしくなってしまう.ばかなのか?
新たな問題と解決策
wsl上ですべて行えば問題は生じないということがわかったが,このままではかの有名な emacsやらvimやらで涙を流しながらプログラムを書くことになる.ただでさえ慣れない言語に挑戦しようというのにエディタの使い方まで同時に学ぶのは流石に苦痛過ぎる.
というわけで Vscode (insiders) の Remote - WSL を使うことにした.これがあれば,wsl上のファイルをストレスなく編集できる.emacsやvimに魂を売り渡す必要はなくなる.