Nuxt太大了，字体太棒了

Question

当我构建项目时，由于 FontAwesome，我的构建文件高达 8MB。从项目中删除 FontAwesome 后，我的构建文件减少到最大 500KB。我正在尝试优化 Nuxt.js 3.8+ 项目中包含的 FontAwesome 图标，以减少构建大小。这是我当前使用的代码：

import {defineNuxtPlugin} from 'nuxt/app';
import {library, config} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {fal} from '@fortawesome/pro-light-svg-icons'
import {far} from '@fortawesome/pro-regular-svg-icons'
import {fas} from '@fortawesome/pro-solid-svg-icons'

export default defineNuxtPlugin(nuxtApp => {
    config.autoA11y = false
    library.add(fal, far, fas); // İhtiyacınız olan ikonları buraya ekleyin
    nuxtApp.vueApp.component('FontAwesomeIcon', FontAwesomeIcon);
});
plugins: [
        { src: '~/plugins/fontawesome.js', mode: 'client' },]

一些论坛上有解决方案，但我没有找到nuxtjs 3.8+的解决方案

Answer 1

也许这不是满足您需求的解决方案，但我建议您使用Nuxt图标模块和/或Iconify fontawesome。

这可以确保在构建项目时仅使用使用过的图标。当然，它可能需要在模板中重新设计新的图标语法，但这比最终将整包图标一起导入要好得多