Tailwind CSS v kombinaci s React a ShadcnUI je populární stack pro moderní webové aplikace. Ale i s těmito nástroji lze snadno vytvořit pomalou aplikaci, pokud nevíte, čeho se vyvarovat.
V tomto článku odhalíme 7 nejčastějších chyb, které vývojáři dělají při práci s tímto stackem, a ukážeme, jak je správně řešit pro maximální výkon.
Rychlost aplikace není jen o technologii — je to o tom, jak ji používáte. I ten nejlepší framework vám nepomůže, pokud ignorujete základní principy výkonu.
Jedním z nejčastějších problémů je nadměrné používání dynamických tříd v Tailwindu, které brání tree-shakingu nepoužívaných stylů. Dalším problémem je zbytečný re-rendering komponent v Reactu kvůli špatně nastaveným dependencies v hookách.
Klíčové oblasti optimalizace
ShadcnUI komponenty jsou sice krásné, ale při nesprávném použití mohou výrazně zpomalit aplikaci. Každý dialog, popover nebo dropdown vytváří nový portal v DOM, což při velkém množství komponent zatěžuje prohlížeč.
- Používejte useMemo a useCallback pro prevenci zbytečných re-renderů
- Lazy-loadujte ShadcnUI komponenty, které nejsou viditelné při prvním načtení
- Vyhněte se dynamickým Tailwind třídám — používejte clsx nebo cva
- Implementujte virtualizaci pro dlouhé seznamy (react-virtual)
- Optimalizujte obrázky pomocí next/image s blur placeholder
- Používejte React.memo pro čisté prezentační komponenty
- Profilujte aplikaci pomocí React DevTools Profiler
Výkon aplikace by měl být prioritou od prvního řádku kódu. Pravidelný profiling, code-splitting a správné použití React patterns vám pomohou udržet aplikaci rychlou i při rostoucí komplexitě.