vue-cliのserveコマンドでlocalhost接続するとめちゃくちゃ遅い現象

こんにちは。Nonです。
今回はVueの開発中にハマったことについて、軽く纏めておこうと思います。

vue-cliでVue環境を構築し、あるアプリを作成しようとしていたのですが、レスポンスが重く作業にならない現象がありました。

結論

vue.config.jsに下記の設定を追加してください。

copied.module.exports = {
    devServer: {
        port: 8888,
        disableHostCheck: true,
    },
};

原因

ポートか名前解決が原因かと思います。

私の環境ではサーバーサイドの開発のために、dockerを起動しながら開発をしていたので、ポート周りで激突した可能性があります。

disableHostCheckはホスト名ではなく、IPで接続できるようにする設定だそうです。
なので、localhostではなくIPでローカルと接続します。

うーん...名前解決が原因なのでしょうか？

色々調べてみた

Macの名前解決について調べた

https://kuroeveryday.blogspot.com/2018/08/accessing-to-localhost-is-very-slow-on-high-sierra.html

127.0.0.1でアクセスする（解消）
詳細は後述するが、どうやらlocalhostの名前解決に時間がかかっているようだった。そのため、127.0.0.1でアクセスすると正常にアクセスできた。

とあるので、こちらもlocalhostで接続するのではなく、IPで接続する手法で解決しています。
もしかすると、MacOSとChromeの相性な気がします。

ブラウザを変えてみる

MacOSとChromeの相性が原因なら、ブラウザ変えたらどうなるのでしょうか。
Chromium系ブラウザで現象が起こるので、safariとかにしてみました。

結果：めっちゃ速い

これは確定じゃないですか？

Vueでめっちゃ速くなったので、今度Dockerのlocalhost接続時もSafariで接続してみて早くなったらもう確定でしょう。

もしかしたらポートは関係無い？

copied.module.exports = {
    devServer: {
        port: 8888,
        disableHostCheck: true,
    },
};

と、書きましたがport: 8888は必要無いかもしれません。
私の環境ではこれが無いと遅くなったので必要でしたが、他の方の環境だと必要無いかもしれません。

その時はコメントなどでご教示頂ければ幸いです。

最後に

今回はvue-cli使用時にlocalhost接続が重くなる現象について纏めてみました。
しかし、ほとんどが名前解決のお話になってしまいましたね。
MacOSとChromeを使用してlocalhost接続をした際に、重い現象に当たったら是非参考にしてみてください。

なにか知見のある方がおられましたら、コメントなどに書いてシェアしていただけると大変助かります。

.