vue.js - Nuxt vendor.app 太大，font awesome 太大

Question

您好，我在我的项目中使用 Nuxt JS，我注意到我的 js 文件变得相当大

我的问题是如何缩小或拆分超过 1mb 的 vendor 或 js 文件

我还看到 font-awesome 也占用了很多空间

我怎样才能删除所有这些不必要的库并使 js 文件更小？

真棒字体是:200KBfree-solid-svg-icons:194KBvendor.app: 1MB

Answer 1

这就是我削减 1+ MB 的方法

首先，如果您正在使用 nuxt-fontawesome 模块，请将其删除。我无法弄清楚如何优化它，即使我明确列出了我关心的图标。

相反，我创建了一个很棒的字体插件并使用了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>

之前

之后