Bundler tree-shaking (és amikor hazudik)

Kapcsolódó szolgáltatás Weboldal és webshop

MEGHATÁROZÁS

A bundler (esbuild, Rollup, Webpack, Turbopack) statikus elemzéssel kihagyja a nem használt exportokat. Akkor működik, ha a modulok ESM-ek, az export-ok hivatkozhatatlanok és a side-effect annotáció helyes (`sideEffects: false` a package.json-ben). Akkor hazudik, ha CJS-t fogyasztasz, dinamikus require/import-ot használsz, vagy a lib `import './polyfill'` mintán él. A 'kicsire vártam' csomag oka legtöbbször ez · ellenőrizd `webpack-bundle-analyzer` vagy `source-map-explorer` segítségével.

KAPCSOLÓDÓ FOGALMAK06

SSR (Server-Side Rendering)→
A HTML-t a szerver rendereli kérésre, minden felhasználónak frissen. Dinamikus tartalomra (dashboard) ideális, de lassabb, mint az SSG.
SSG (Static Site Generation)→
Az oldalak build-időben készülnek el HTML-ként, és egy CDN szolgálja ki őket. Szinte nulla TTFB. A DField saját oldala 111+ oldallal fut így.
ISR (Incremental Static Regeneration)→
SSG + időzített regeneráció: a HTML statikus, de megadott intervallumban újragenerálódik. Blog-cikkekhez ideális · frissesség CDN-sebességgel.
Edge rendering→
A kód a felhasználóhoz legközelebbi CDN-pontban fut (Cloudflare Workers, Vercel Edge). Dinamikus válasz ~10–50 ms TTFB-vel.
RSC (React Server Components)→
React-komponensek, amik kizárólag szerveren futnak, és nem kerülnek át a böngészőbe. Eredménye kevesebb kliens-oldali JS és gyorsabb hydration.
LCP (Largest Contentful Paint)→
A legnagyobb látható elem megjelenésének ideje. Google Core Web Vitals zöld küszöbe 2.5s alatt · mi jellemzően <1s alá lőjük a landing oldalakat.

EMLÍTÉSEK A BLOGON05