Nuxt的vendor.app文件过大，font awesome也过大。

Question

您好，我正在使用Nuxt JS进行项目开发，但是我的js文件变得越来越大。

我的问题是如何使它变小或者将超过1MB的供应商或js文件分割成更小的文件？

另外，我注意到font-awesome所占用的空间也很大。

如何删除所有这些不必要的库，并使js文件更小？

Font awesome 占用200KB， free-solid-svg-icons 占用194KB， vendor.app 占用1MB。

- Loki

Answer 1

这是我如何成功减少1+ MB的方法：

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

相反，我创建了一个font-awesome插件，并使用了README中提到的library。

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>

之前

之后

- pek

---

谢谢，帮了很大的忙。我忘记从nuxt配置中删除原始的font awesome设置，这导致加载所有内容而不仅仅是配置组件。 - Hvitis