Javascript 在font awesome作为一个组件添加到Vue.js后，热加载速度非常慢

我最近在Vue.js中启动了一个有趣的项目，因为使用这个框架似乎很有趣。我决定添加一个组件。不幸的是，在我的Vue组件之一中使用后：

<template>
  <div class="success-box-wrapper">
    <div class="box">
      <div class="box-header">
        <span class="close">x</span>
      </div>
      <div class="box-body">

      </div>
      <div class="box-footer">
        <div class="checkmark-circle">
          <div class="background"></div>
          <font-awesome-icon fa :icon="faCheck"/>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { faCheck } from '@fortawesome/free-solid-svg-icons';

export default {
  name: 'SuccessBox',
  data() {
    return {
      isOpen: false,
      faCheck,
    };
  },
};
</script>

<style>
</style>

编辑类似解决方案的变通方法：

---

之前，我在docker容器内运行了

warn service

。它会导致很长时间的热重新加载。当我直接在Windows中运行它时，它的编译时间为500ms。我把它作为一个未解决的问题，因为我仍然不知道为什么Docker上的速度如此之慢。

刚刚就这个问题做了几天噩梦，我想我可能已经找到了解决方法

首先，对我来说，这不是在通过纱线/npm添加任何特定包装之后。此外，我还必须使用Windows作为Linux容器的主机操作系统

我用vue cli启动了一个新项目，一切正常，在对接之后，HMR速度慢得无法忍受

这里似乎有两个主要方面，正在使用的端口和

节点\u模块/

构建时间

修复其中任何一个对我都没有多大帮助，但修复两个都使HMR非常接近于再次在本地运行

因此，我添加了以下内容来修复：

docker compose.yml

版本：“3.7”
服务：
前端：
容器名称：我的前端
建造：
上下文：。
dockerfile：dockerfile
卷数：
-“.：/app”
-“/app/node_modules”#刚刚经历了几天的噩梦，我想我可能已经找到了解决方法

首先，对我来说，这不是在通过纱线/npm添加任何特定包装之后。此外，我还必须使用Windows作为Linux容器的主机操作系统

我用vue cli启动了一个新项目，一切正常，在对接之后，HMR速度慢得无法忍受

这里似乎有两个主要方面，正在使用的端口和
节点\u模块/
构建时间

修复其中任何一个对我都没有多大帮助，但修复两个都使HMR非常接近于再次在本地运行

因此，我添加了以下内容来修复：

docker compose.yml

版本：“3.7”
服务：
前端：
容器名称：我的前端
建造：
上下文：。
dockerfile：dockerfile
卷数：
-“.：/app”
-“/app/node_modules”#显然这是一个已知问题：。如果你遵循链接，你可以找到一些解决方法，你可以尝试回答你！不幸的是，只有“使用深度导入”解决方案对我有效，但并不完全有效。它将构建时间从54秒降到了54秒。到19岁，不幸的是对我来说还是太多了：/显然这是一个已知的问题：。如果你遵循链接，你可以找到一些解决方法，你可以尝试回答你！不幸的是，只有“使用深度导入”解决方案对我有效，但并不完全有效。它将构建时间从54秒降到了54秒。到19岁，不幸的是，这对我来说还是太多了：/
node_1  |  WAIT  Compiling...10:03:32 AM
node_1  |
node_1  | <s> [webpack.Progress] 0% compiling
node_1  | <s> [webpack.Progress] 10% building 0/0 modules 0 active
node_1  | <s> [webpack.Progress] 10% building 0/0 modules 0 active
node_1  | <s> [webpack.Progress] 40% building 0/0 modules 0 active
node_1  | <s> [webpack.Progress] 40% building 0/1 modules 1 active /usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/node_modules/eslint-loader/index.js??ref--13-0!/usr/sr
c/app/src/components/SuccessBox.vue
node_1  | <s> [webpack.Progress] 70% building 1/1 modules 0 active
node_1  | <s> [webpack.Progress] 40% building 1/2 modules 1 active /usr/src/app/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"593dd390-vue-loader-template"}!/usr/src/app/node_modules/vue-loader/lib/loade
rs/templateLoader.js??vue-loader-options!/usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/src/components/SuccessBox.vue?vue&type=template&id=6d8cce10&scoped=true&
node_1  | <s> [webpack.Progress] 40% building 1/3 modules 2 active /usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--12-0!/usr/src/app/node_modules/babel-loader/lib/index.js!/usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modul
es/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/src/components/SuccessBox.vue?vue&type=script&lang=js&
node_1  | <s> [webpack.Progress] 40% building 1/4 modules 3 active /usr/src/app/node_modules/css-loader/index.js??ref--8-oneOf-1-1!/usr/src/app/node_modules/vue-loader/lib/loaders/stylePostLoader.js!/usr/src/app/node_modules/postcss-loader/src/index.js??ref--8-oneO
f-1-2!/usr/src/app/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!/usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/src/components/SuccessBox.vue?vue&type=style&in
dex=0&id=6d8cce10&lang=scss&scoped=true&
node_1  | <s> [webpack.Progress] 40% building 2/4 modules 2 active /usr/src/app/node_modules/css-loader/index.js??ref--8-oneOf-1-1!/usr/src/app/node_modules/vue-loader/lib/loaders/stylePostLoader.js!/usr/src/app/node_modules/postcss-loader/src/index.js??ref--8-oneO
f-1-2!/usr/src/app/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!/usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/src/components/SuccessBox.vue?vue&type=style&in
dex=0&id=6d8cce10&lang=scss&scoped=true&
node_1  | <s> [webpack.Progress] 54% building 3/4 modules 1 active /usr/src/app/node_modules/css-loader/index.js??ref--8-oneOf-1-1!/usr/src/app/node_modules/vue-loader/lib/loaders/stylePostLoader.js!/usr/src/app/node_modules/postcss-loader/src/index.js??ref--8-oneO
f-1-2!/usr/src/app/node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!/usr/src/app/node_modules/cache-loader/dist/cjs.js??ref--0-0!/usr/src/app/node_modules/vue-loader/lib/index.js??vue-loader-options!/usr/src/app/src/components/SuccessBox.vue?vue&type=style&in
dex=0&id=6d8cce10&lang=scss&scoped=true&
node_1  | <s> [webpack.Progress] 70% building 4/4 modules 0 active
node_1  | <s> [webpack.Progress] 70% building 4/4 modules 0 active
node_1  | <s> [webpack.Progress] 70% finish module graph
node_1  | <s> [webpack.Progress] 70% finish module graph FlagDependencyExportsPlugin
node_1  | <s> [webpack.Progress] 70% sealing
node_1  | <s> [webpack.Progress] 70% sealing WarnCaseSensitiveModulesPlugin
node_1  | <s> [webpack.Progress] 72% basic dependencies optimization
node_1  | <s> [webpack.Progress] 72% dependencies optimization
node_1  | <s> [webpack.Progress] 73% advanced dependencies optimization
node_1  | <s> [webpack.Progress] 73% after dependencies optimization
node_1  | <s> [webpack.Progress] 71% chunk graph
node_1  | <s> [webpack.Progress] 71% after chunk graph
node_1  | <s> [webpack.Progress] 71% after chunk graph WebAssemblyModulesPlugin
node_1  | <s> [webpack.Progress] 74% optimizing
node_1  | <s> [webpack.Progress] 74% basic module optimization
node_1  | <s> [webpack.Progress] 75% module optimization
node_1  | <s> [webpack.Progress] 75% advanced module optimization
node_1  | <s> [webpack.Progress] 76% after module optimization
node_1  | <s> [webpack.Progress] 76% basic chunk optimization
node_1  | <s> [webpack.Progress] 76% basic chunk optimization EnsureChunkConditionsPlugin
node_1  | <s> [webpack.Progress] 76% basic chunk optimization RemoveEmptyChunksPlugin
node_1  | <s> [webpack.Progress] 76% basic chunk optimization MergeDuplicateChunksPlugin
node_1  | <s> [webpack.Progress] 77% chunk optimization
node_1  | <s> [webpack.Progress] 77% advanced chunk optimization
node_1  | <s> [webpack.Progress] 77% advanced chunk optimization SplitChunksPlugin
node_1  | <s> [webpack.Progress] 77% advanced chunk optimization RemoveEmptyChunksPlugin
node_1  | <s> [webpack.Progress] 77% after chunk optimization
node_1  | <s> [webpack.Progress] 78% module and chunk tree optimization
node_1  | <s> [webpack.Progress] 78% after module and chunk tree optimization
node_1  | <s> [webpack.Progress] 79% basic chunk modules optimization
node_1  | <s> [webpack.Progress] 80% chunk modules optimization
node_1  | <s> [webpack.Progress] 80% advanced chunk modules optimization
node_1  | <s> [webpack.Progress] 81% after chunk modules optimization
node_1  | <s> [webpack.Progress] 81% module reviving
node_1  | <s> [webpack.Progress] 81% module reviving RecordIdsPlugin
node_1  | <s> [webpack.Progress] 82% module order optimization
node_1  | <s> [webpack.Progress] 82% advanced module order optimization
node_1  | <s> [webpack.Progress] 83% before module ids
node_1  | <s> [webpack.Progress] 83% before module ids NamedModulesPlugin
node_1  | <s> [webpack.Progress] 83% module ids
node_1  | <s> [webpack.Progress] 84% module id optimization
node_1  | <s> [webpack.Progress] 84% module id optimization
node_1  | <s> [webpack.Progress] 85% chunk reviving
node_1  | <s> [webpack.Progress] 85% chunk reviving RecordIdsPlugin
node_1  | <s> [webpack.Progress] 85% chunk order optimization
node_1  | <s> [webpack.Progress] 85% chunk order optimization OccurrenceOrderChunkIdsPlugin
node_1  | <s> [webpack.Progress] 86% before chunk ids
node_1  | <s> [webpack.Progress] 86% before chunk ids NamedChunksPlugin
node_1  | <s> [webpack.Progress] 86% chunk id optimization
node_1  | <s> [webpack.Progress] 87% after chunk id optimization
node_1  | <s> [webpack.Progress] 87% record modules
node_1  | <s> [webpack.Progress] 87% record modules RecordIdsPlugin
node_1  | <s> [webpack.Progress] 87% record chunks
node_1  | <s> [webpack.Progress] 87% record chunks RecordIdsPlugin
node_1  | <s> [webpack.Progress] 88% hashing
node_1  | <s> [webpack.Progress] 88% after hashing
node_1  | <s> [webpack.Progress] 88% after hashing HotModuleReplacementPlugin
node_1  | <s> [webpack.Progress] 89% record hash
node_1  | <s> [webpack.Progress] 89% module assets processing
node_1  | <s> [webpack.Progress] 90% chunk assets processing
node_1  | <s> [webpack.Progress] 90% additional chunk assets processing
node_1  | <s> [webpack.Progress] 90% additional chunk assets processing HotModuleReplacementPlugin
node_1  | <s> [webpack.Progress] 91% recording
node_1  | <s> [webpack.Progress] 91% recording HotModuleReplacementPlugin
node_1  | <s> [webpack.Progress] 92% additional asset processing
node_1  | <s> [webpack.Progress] 92% chunk asset optimization
node_1  | <s> [webpack.Progress] 93% after chunk asset optimization
node_1  | <s> [webpack.Progress] 93% asset optimization
node_1  | <s> [webpack.Progress] 94% after asset optimization
node_1  | <s> [webpack.Progress] 94% after seal
node_1  | <s> [webpack.Progress] 95% emitting
node_1  | <s> [webpack.Progress] 95% emitting HtmlWebpackPlugin
node_1  | <s> [webpack.Progress] 95% emitting CopyPlugin
node_1  | <s> [webpack.Progress] 98% after emitting
node_1  | <s> [webpack.Progress] 98% after emitting CopyPlugin
node_1  |  DONE  Compiled successfully in 54369ms10:04:26 AM
node_1  |
node_1  | <s> [webpack.Progress] 100%
node_1  |
node_1  |
node_1  |   App running at:
node_1  |   - Local:   http://localhost:8080/
node_1  |
node_1  |   It seems you are running Vue CLI inside a container.
node_1  |   Access the dev server via http://localhost:<your container's external mapped port>/