Recently, I decided to embark on a fun project using Vue.js because working with this framework seemed enjoyable. To enhance my project, I chose to incorporate the https://github.com/FortAwesome/vue-fontawesome component. However, upon using it in one of my Vue components:
<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>
The webpack build process for my project has become unusually slow.
DONE Compiled successfully in 54369ms10:04:26 AM<font-awesome-icon fa :icon="faCheck"/>node_1 | WAIT Compiling...10:03:32 AM
node_1 |
(node_1 logs continue)
WORKAROUND-LIKE SOLUTION IMPLEMENTED:
Prior to employing a workaround solution, I was running yarn serve within a Docker container, resulting in prolonged compilation times during hot reloads. Contrastingly, launching the project directly on Windows yielded compile times of just 500ms. This issue persists unresolved, as the cause behind the sluggishness when run through Docker remains elusive.