docker環境上でvue.jsのコンパイル時間を短縮したい

前提・実現したいこと

docker環境上でvue.jsのコンパイル時間を短縮したいです。

現在dockerで開発環境を構築し、バックエンドrails, フロントエンドvue.jsで開発中です。しかし、ファイルを変更し変更内容を反映させようとリロードすると反映に時間がかかります。
なんとか時間を短縮出来ないか調べたのですが躓いています。

コンパイルを早くするために解決策などありましたら教えてもらえないでしょうか？汗

発生している問題

[Webpacker] Compiling...
[Webpacker] Compiled all packs in /beauty-salon/public/packs
[Webpacker] Hash: 5059c48e927511892664
Version: webpack 4.46.0
Time: 14721ms
Built at: 01/16/2021 1:24:26 PM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-c229f7c7014cf8c8d494.js    124 KiB  application  [emitted] [immutable]  application
js/application-c229f7c7014cf8c8d494.js.map    139 KiB  application  [emitted] [dev]        application
      js/hello_vue-2fd4458342cf8edad529.js    266 KiB    hello_vue  [emitted] [immutable]  hello_vue
  js/hello_vue-2fd4458342cf8edad529.js.map    312 KiB    hello_vue  [emitted] [dev]        hello_vue
                             manifest.json  689 bytes               [emitted]              
Entrypoint application = js/application-c229f7c7014cf8c8d494.js js/application-c229f7c7014cf8c8d494.js.map
Entrypoint hello_vue = js/hello_vue-2fd4458342cf8edad529.js js/hello_vue-2fd4458342cf8edad529.js.map
[./app/javascript/app.vue] 1.14 KiB {hello_vue} [built]
[./app/javascript/app.vue?vue&type=script&lang=js&] 364 bytes {hello_vue} [built]
[./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] 361 bytes {hello_vue} [built]
[./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true&] 213 bytes {hello_vue} [built]
[./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/packs/application.js] 749 bytes {application} [built]
[./app/javascript/packs/hello_vue.js] 1.89 KiB {hello_vue} [built]
[./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=script&lang=js&] ./node_modules/babel-loader/lib??ref--8-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js& 116 bytes {hello_vue} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] ./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 763 bytes {hello_vue} [built]
[./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css&] ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-2!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css& 771 bytes {hello_vue} [built]
[./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true&] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true& 288 bytes {hello_vue} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {hello_vue} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
    + 10 hidden modules

  Rendered home/index.html.erb within layouts/application (Duration: 23045.0ms | Allocations: 2634)
[Webpacker] Everything's up-to-date. Nothing to do
Completed 200 OK in 23115ms (Views: 23113.0ms | ActiveRecord: 0.0ms | Allocations: 5944)

試したこと

以下のサイトを参考にbin/webpack-dev-serverをターミナルで実行しましたがエラーが出て実行不可能でした、、
またdockerのコンテナ内ではcompileが遅いのですが、それ以外ではリロードしても一瞬でファイルの設定内容が反映されました。
docker環境下ではコンパイルが遅くなるのは仕方ない事なのでしょうか、、

https://fuqda.hatenablog.com/entry/2019/03/10/185043

$ bin/webpack-dev-server 

Traceback (most recent call last):
        7: from bin/webpack-dev-server:16:in `<main>'
        6: from bin/webpack-dev-server:16:in `chdir'
        5: from bin/webpack-dev-server:17:in `block in <main>'
        4: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/runner.rb:6:in `run'
        3: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:11:in `run'
        2: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `detect_port!'
        1: from /usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `new'
/usr/local/bundle/gems/webpacker-4.3.0/lib/webpacker/dev_server_runner.rb:38:in `initialize': getaddrinfo: Name or service not known (SocketError)