Treeshaking

A “treeshaking” egy optimalizációs technika a JavaScript modulok esetében, amelynek célja, hogy eltávolítsa a végleges kötegelt kódból (bundle) azokat a kód részeket, amelyeket nem használnak az alkalmazásban. Ezt azért nevezik “treeshaking”-nek (vagy magyarul “fa rázogatásnak”), mert ha elképzeljük a kódot egy fa szerkezetként, ahol a modulok és függőségeik a fa ágai és levelei, a treeshaking lényegében “megrázza” a fát és eltávolítja azokat a “leveleket”, amelyek nem szükségesek.

Ez a technika különösen fontos a modern frontend alkalmazások számára, mivel a webalkalmazások mérete folyamatosan növekszik az évek során. A treeshaking lehetővé teszi a fejlesztők számára, hogy csak a ténylegesen használt kód kerüljön be a végleges kötegbe, ami jelentősen csökkenti a letöltendő JS méretét, gyorsítja a betöltési időket és javítja az alkalmazás teljesítményét.

A treeshaking leginkább az ES6 modulokkal (azaz import és export használatával) működik hatékonyan, mivel ezek a modulok statikusan analizálhatók, ami lehetővé teszi a bundlerek számára, mint például a Webpack vagy a Rollup, hogy hatékonyan azonosítsák és eltávolítsák a fel nem használt kódot.

Például:

// utils.js
export function usedFunction() {
  return 'Ez a funkció használva van.';
}

export function unusedFunction() {
  return 'Ezt a funkciót nem használják.';
}

// main.js
import { usedFunction } from './utils.js';

console.log(usedFunction());

Ebben a példában, még ha az utils.js tartalmazza is az unusedFunction-t, a treeshaking-ot alkalmazó bundler észreveszi, hogy csak a usedFunction-t importálják és használják, és így az unusedFunction-t nem fogja belefoglalni a végleges kötegbe.

Az Angular, React, és más modern keretrendszerek esetében a treeshaking általában automatikusan alkalmazva van a bundler konfigurációjában, ami lehetővé teszi a fejlesztők számára, hogy élvezhessék az optimalizációs előnyöket anélkül, hogy különösebb erőfeszítést kellene tenniük.