Teljesítmény

Teljesítmény

Automatikus purge a v4-ben

A Tailwind v4 automatikusan felismeri a template fájlokat és csak a ténylegesen használt class-eket fordítja be a CSS-be. Nincs szükség kézi content konfigurációra.

Hogyan működik? A Tailwind v4 engine (Oxide, Rust-ban írva):

1. Megkeresi a projektben lévő összes releváns fájlt (kizárja a .gitignore-ban és node_modules-ban lévőket)
2. Statikusan elemzi a class neveket
3. Csak a talált class-ekhez generál CSS-t

Build teljesítmény (v4 vs v3)

Production build mérete

Egy tipikus Next.js alkalmazás production CSS-je Tailwind-del 5-20 KB között van (tömörítve). Ez nagyon kis méret a manuálisan írt CSS-hez képest, ahol a fájl mérete a projektel együtt nő.

Mit ne tegyél teljesítmény szempontból

// ❌ Dinamikus class generálás kizárja a purge-ből
const size = 'lg';
<div className={`text-${size}`}>...

// ❌ JavaScript Object.keys() alapú class lista (nehéz statikusan elemezni)
const classes = Object.fromEntries(Object.keys(styles).map(...))

// ✅ Teljes class nevek, mindig literálisan megírva
const sizeMap = { lg: 'text-lg', sm: 'text-sm' };
<div className={sizeMap[size]}>...

Összefoglaló

A v4 engine Rust-alapú, drámaian gyorsabb mint a v3. A build mérete automatikusan optimális, nincs teendő – csak kerüld a dinamikus class generálást részleges stringekkel. A production CSS mérete jellemzően töredéke a manuálisan írt megoldásoknak.