Warm tip: This article is reproduced from stackoverflow.com, please click
vue.js webpack nuxt

Nuxt vendor.app is too big,font awesome too big

发布于 2020-03-27 15:40:50

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

enter image description here

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

Questioner
Loki
Viewed
620
pek 2020-01-31 16:18

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>

Before

before

After

after