javascript - 将 font-awesome 作为组件添加到 Vue.js 后,热重载非常慢
问题描述
我最近在 Vue.js 中开始了有趣的项目,因为使用这个框架似乎很有趣。我决定添加https://github.com/FortAwesome/vue-fontawesome组件。不幸的是,在我的一个 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>
Webpack 似乎构建项目非常缓慢。
DONE Compiled successfully in 54369ms10:04:26 AM
不仅在添加之后,<font-awesome-icon fa :icon="faCheck"/>
而且在任何更改之后。我试图在 Vue 之外弹出 webpack,但似乎没有任何效果。也许我不应该使用 font-awesoma 作为组件?也许我应该通过插入 CDN href 以“旧”方式使用?
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>/
编辑类似解决方案的解决方案:
以前我yarn serve
在 docker 容器内运行。它会导致很长的热重载。当我直接在 Windows 中运行它时,它会在 500毫秒内编译。我把它作为未解决的问题,因为我仍然不知道为什么它在 Docker 上这么慢。
解决方案
刚刚在这个问题上做了几天的噩梦,我想我可能已经找到了解决办法。
首先,对我来说,这不是在通过 yarn/npm 添加任何特定包之后。此外,我必须将 Windows 用作带有 Linux 容器的主机操作系统。
我用 vue-cli 开始了一个新项目,一切正常,在将其 docker 化后,HMR 速度慢得无法使用。
这里似乎有两个主要方面在起作用,使用的端口和node_modules/
构建时间。
修复其中一个对我没有太大帮助,但修复两个都让 HMR 非常接近再次原生运行。
所以这些是我添加修复的东西:
docker-compose.yml
version: '3.7'
services:
front-end:
container_name: my-front-end
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules' # <---- this enables a much faster start/reload
ports:
# default port does work but slow without mounting node_modules (above)
# - '8080:8080'
# for some reason HMR breaks completely when not using the same port as the container.
# - '8007:8080'
# - '8006:8007'
# port 8007 set up in vue.config
- '8007:8007'
# this is now also done in the vue.config
# environment:
# - CHOKIDAR_USEPOLLING=true
vue.config.js
module.exports = {
devServer: {
public: "localhost:8007",
port: 8007,
disableHostCheck: true,
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 300,
},
},
};
我希望这对某人有所帮助。
推荐阅读
- php - 如何在 Prestashop 中将付款费用添加到购物车?
- unity3d - 如何区分统一层次结构中的对象类型?
- configuration - 当工作刚刚挂起时,我在哪里可以找到 slurm 诊断信息?
- google-chrome - 有 ERR_SSL_PROTOCOL_ERROR NETFLIX 的解决方案吗
- cron - TYPO3 中的 Cronjob 失败 - 格式错误的解析器 URI - direct_mail
- python - NodeJS 中的 RabbitMQ 密码散列
- javascript - 反应为什么重新渲染将“数据”的状态从 null 更改为已填充
- r - 将包含多个名称和日期的日期向量分离为 R 中的单独名称和日期向量
- iframe - cypress - 单击 iframe 元素,而 iframe 的主体在几秒钟后发生变化
- reactjs - 使用 vs 代码将我的反应应用程序部署到 git 集线器时遇到错误