温馨提示:本文翻译自stackoverflow.com,查看原文请点击:vue.js - Nuxt vendor.app is too big,font awesome too big
vue.js webpack nuxt

vue.js - Nuxt vendor.app太大,字体太棒了

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

嗨,我在我的项目中使用Nuxt JS,我注意到我的js文件越来越大

我的问题是如何缩小或拆分1mb以上的供应商或js文件

我也看到字体超赞也占用了很多空间

在此处输入图片说明

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

很棒的字体是:200KB free-solid-svg-icons:194KB vendor.app:1MB

查看更多

查看更多

提问者
Loki
被浏览
258
pek 2020-01-31 16:18

这就是我能够剃掉1+ MB的方式

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

相反,我创建了一个字体超赞的插件,并使用library 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>

之前

之前

后