Web Developmentpokročilý

Čo je Tree Shaking?

Tree shaking je optimalizačná technika, ktorá automaticky odstraňuje nepoužívaný kód z finálneho JavaScript bundlu. Bundler analyzuje importy a exporty modulov a vylúči časti kódu, ktoré sa nikde nevolajú. Výsledkom je menší súbor a rýchlejšie načítanie aplikácie.

Definícia Tree Shaking

Čo je tree shaking

Tree shaking (po slovensky trasenie stromu) je technika eliminácie mŕtveho kódu (dead code elimination) v JavaScript bundleroch. Názov pochádza z metafory — ak zatrasieme stromom, spadnú mŕtve listy. Podobne bundler „zatrasie" kódom a odstráni časti, ktoré sa nikde nepoužívajú.

Ako tree shaking funguje

Tree shaking funguje na základe statickej analýzy ES modulov (import/export):

  • Analýza závislostí — bundler vytvorí graf všetkých importov a exportov v projekte
  • Označenie nepoužívaného kódu — funkcie, triedy a premenné, ktoré nikto neimportuje, sa označia ako mŕtvy kód
  • Odstránenie — pri finálnom builde sa mŕtvy kód vylúči z výstupného súboru

Predpoklady pre tree shaking

  • ES moduly — kód musí používať import/export, nie CommonJS require()
  • Bez vedľajších efektov — moduly by nemali meniť globálny stav pri importe (alebo musia byť označené cez "sideEffects": false v package.json)
  • Produkčný build — tree shaking sa zvyčajne vykonáva len pri produkčnom builde

Praktický príklad

Príklad: Projekt importuje z knižnice lodash len funkciu debounce:

import { debounce } from 'lodash-es';

Celá knižnica lodash má približne 530 funkcií a 72 kB (minifikovaný gzip). Bez tree shakingu by sa do bundlu zahrnula celá knižnica. S tree shakingom bundler zahrnie len debounce a jej interné závislosti — výsledok je približne 1,5 kB namiesto 72 kB. Úspora: 98 %.

Často kladené otázky

Čo je tree shaking v JavaScripte?

Tree shaking je technika automatického odstraňovania nepoužívaného kódu z JavaScript bundlu. Bundler analyzuje, ktoré funkcie a moduly sa skutočne importujú a používajú, a zvyšok vylúči z finálneho súboru.

Prečo tree shaking nefunguje s CommonJS?

CommonJS moduly (require/module.exports) sú dynamické — bundler nemôže pri compile-time s istotou určiť, ktoré časti sa použijú. ES moduly (import/export) sú statické, čo umožňuje presnú analýzu závislostí.

Ako overím, či tree shaking funguje v mojom projekte?

Môžete použiť nástroje ako webpack-bundle-analyzer alebo source-map-explorer, ktoré vizualizujú obsah vášho bundlu. Ak vidíte veľké nepoužívané časti knižníc, tree shaking pravdepodobne nefunguje správne.

Súvisiace pojmy

Code Splitting

Code splitting je technika rozdelenia JavaScript kódu aplikácie na menšie časti (chunky), ktoré sa načítavajú podľa potreby. Namiesto jedného obrovského súboru prehliadač stiahne len kód potrebný pre aktuálnu stránku. Výrazne zrýchľuje počiatočné načítanie aplikácie.

Minifikácia

Minifikácia je proces odstránenia nepotrebných znakov zo zdrojového kódu bez zmeny jeho funkčnosti. Odstraňujú sa medzery, zalomenia riadkov, komentáre a skracujú sa názvy premenných. Výsledkom je menší súbor, ktorý sa rýchlejšie stiahne a spracuje.

Lazy Loading

Lazy loading je technika odloženého načítavania zdrojov, pri ktorej sa obrázky, videá alebo časti kódu načítajú až vtedy, keď ich používateľ skutočne potrebuje. Znižuje počiatočný objem dát a výrazne zrýchľuje prvé vykreslenie stránky. Prehliadače dnes podporujú natívny lazy loading cez atribút loading="lazy".

Kompresia

Kompresia je proces zmenšenia veľkosti dát pomocou kompresných algoritmov pred ich odoslaním z webového servera do prehliadača. Prehliadač prijaté dáta dekomprimuje a zobrazí. Na webe sa najčastejšie používajú algoritmy Gzip a Brotli, ktoré dokážu zmenšiť textové súbory o 60-90 %.

WebP

WebP je moderný obrazový formát vyvinutý spoločnosťou Google, ktorý ponúka o 25-35 % menšie súbory ako JPEG pri rovnakej vizuálnej kvalite. Podporuje stratovú aj bezstratovú kompresiu, priehľadnosť (alfa kanál) a animácie. Je podporovaný všetkými modernými prehliadačmi.

Späť na slovník

Potrebujete pomôcť s webom?

Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.

Napíšte miPozrite moju prácu