Jak odziedziczyłem problem z Font Awesome za 50 dolarów dziennie w Nuxt 3

Zagadka: dlaczego rachunek za Vercela eksplodował?

Przejąłem projekt w Nuxt 3 po innym deweloperze i wypchnąłem go na produkcję, bo deadline już mijał. W ciągu kilku dni koszty transferu w Vercelu przekroczyły 50 dolarów dziennie.

Jedyna poszlaka? Rozmiar bundle'a był gigantyczny.

Po chwili grzebania znalazłem źródło problemu:
Font Awesome był importowany z gwiazdką, co wciągało do bundle'a każdą ikonę z biblioteki.

Problem, który odziedziczyłem

Oryginalna konfiguracja wyglądała tak:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'

library.add(fas)

Jest to wygodne — od razu masz do dyspozycji każdą ikonę w wariancie solid. Ale oznacza też, że setki nieużywanych ikon trafiają do każdego użytkownika, dokładając do bundle'a megabajty zbędnych danych SVG.

Rozwiązanie: importuj tylko to, czego faktycznie używasz

Zamieniłem import z gwiazdką na jawne importy wyłącznie tych ikon, które są używane w aplikacji.

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// ✅ Only specific icons
import { faHeart } from '@fortawesome/pro-light-svg-icons'
import { faCheck } from '@fortawesome/pro-solid-svg-icons'

config.autoAddCss = false
library.add(faHeart, faCheck)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

Efekty

• Rozmiar bundle'a spadł drastycznie
• Zużycie transferu wróciło do normy
• Dzienne koszty spadły z $50 → $1
• Czas ładowania strony wyraźnie się poprawił

Czego się nauczyłem

1. Jeśli przejmujesz cudzy projekt, zrób audyt zewnętrznych importów na samym początku.
2. Nigdy nie importuj całych paczek z ikonami, jeśli naprawdę ich nie potrzebujesz.
3. Korzystaj z analizatorów bundle'a (nuxt build --analyze), żeby wyłapać rozdmuchane zależności, zanim trafią na produkcję.

Jeden import * potrafi po cichu przepalić cały budżet na CDN — zwłaszcza gdy wciąga za sobą całą bibliotekę.