Hi Im using Nuxt JS for my project and I noticed that my js files are getting rather big
And my question is how can I make it smaller or split vendor or js files that are over 1mb
Also I have seen that font-awesome is also taking a lot of space
How can I remove all of this unecessary libraries and make js files smaller ?
Font awesome is: 200KB free-solid-svg-icons: 194KB vendor.app: 1MB
This is how I was able to shave off 1+ MB
First, if you are using nuxt-fontawesome
module, remove it. I was not able to figure out how to optimize it, even if I explicitly listed the icons I cared about.
Instead, I created a font-awesome plugin and used the library
as mentioned in the README.
font_awesome_icons.js
import Vue from 'vue'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faGem } from '@fortawesome/free-regular-svg-icons/faGem'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF'
import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
library.add(faGem, faFacebookF, faUser)
Vue.component('font-awesome-icon', FontAwesomeIcon)
nuxt-config.js
// ...
plugins: [
{ src: '~/plugins/font_awesome_icons.js', mode: 'client' }
],
// ...
index.vue
<template>
<font-awesome-icon :icon="['fab', 'facebook-f']" />
</template>
<script>
export default {
}
</script>
<style>
</style>