Kliens bundle, importok és scriptek
Bundle méret, dinamikus import, harmadik felek és a next/script használata.
13. Kliens bundle, importok és scriptek
Minden 'use client' modul és annak transzitív importjai bekerülnek a böngészőnek küldött JavaScriptbe. A cél: kevés és célzott kliens kód.
Barrel fájlok (index.ts) és a bundle
Ha egy components/index.ts mindent újraexportál, egyetlen import { Button } from '@/components' lehúzhatja az egész csomagot a fa elemezhetőségétől függően. Tanulási és production szempontból is gyakran jobb a közvetlen útvonal:
// ✅ általában kiszámíthatóbb a bundler számára
import { Button } from '@/components/ui/button'
// ⚠️ nagy barrel esetén könnyen nő a bundle
import { Button } from '@/components'Nem „tilalom”, de ha a bundle hirtelen megnő, nézd meg az import gráfot (pl. beépített bundle analyzer a Performance fejezetben).
next/dynamic – nehéz komponensek
Interaktív diagramok, szerkesztők, térképek: gyakran csak kliensen kellenek, és nem az első paint útjában.
import dynamic from 'next/dynamic'
const Chart = dynamic(() => import('@/components/HeavyChart'), {
loading: () => <p>Grafikon betöltése…</p>,
ssr: false,
})A ssr: false csak akkor oké, ha nincs szükség SEO-nak vagy első HTML-nek a tartalomra.
Harmadik felek: analytics, chat widget
A mérőkódok ne blokkolják a hidratálást. A Next next/script komponense stratégiákat ad:
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="hu">
<body>
{children}
<Script
src="https://example.com/analytics.js"
strategy="afterInteractive"
/>
</body>
</html>
)
}afterInteractive: a oldal interaktívvá válása után (tipikus analytics)lazyOnload: még később, böngésző idle közelébenbeforeInteractive: csak ha tényleg szükséges a legkorábban (ritkább)
A Vercel @next/third-parties csomag egyszerűsíti a gyakori integrációkat (pl. Google Analytics) – érdemes a hivatalos dokumentációt követni verzióhoz kötött API-val.
Natív <script> vs next/script
Egyszeri, kis inline snippeteknél néha elég a natív tag – de külső scripteknél a next/script jobban illeszkedik a Next életciklusához és a sorrendhez. Inline third-party kódnál a dokumentáció szerint gyakran kell id attribútum a stabil működéshez.
📝 Összefoglaló – 13. fejezet
- Közvetlen importok nagy design systemeknél segíthetnek a bundle méretén
next/dynamic: nehéz UI késleltetése, opcionálisan kizárva SSR-tnext/script: külső JS betöltési stratégia – analytics „afterInteractive” mint alapértelmezett gondolat