Što su code splitting i tree shaking?

Question

IT Interview Practice · Accepted Answer

Oboje smanjuju JavaScript koji korisnici preuzimaju. **Code splitting** razbija bundle u chunkove koji se učitavaju na zahtjev; **tree shaking** uklanja kod koji nikad ne koristite. Nadopunjuju se: podijelite *što* se učitava, istresite *mrtvi* kod unutar svakog chunka.

## Code splitting

Umjesto jednog velikog bundlea, aplikacija se dijeli tako da je svaka ruta ili teška značajka zaseban chunk dohvaćen samo kad zatreba:

```js
// Podjela po ruti: kod nadzorne ploče ne preuzima se dok je ne posjetite
const Dashboard = lazy(() => import("./routes/Dashboard")); // vlastiti chunk

// Podjela po komponenti: teški editor učitan pri interakciji
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // dohvaćeno na klik
  openEditor();
};
```

Dinamički `import()` je signal — bundler emitira zasebnu datoteku na toj granici.

## Tree shaking

Bundler statički analizira ES modul `import`/`export` i izbacuje exporte koje ništa ne referencira. Radi samo s **ESM-om** (statičan, analizabilan) — ne CommonJS `require`:

```js
import { debounce } from "utils"; // zadržava se samo debounce; throttle itd. se istresu
```

Oslanja se na `"sideEffects": false` u `package.json` i importe po funkciji; barrel datoteke ili moduli s nuspojavama mogu ga poništiti.

## Kompromisi

- Prekomjerno dijeljenje → mnogo malih zahtjeva i vodopadi (waterfalls); grupirajte srodni kod.
- Tree shaking je krhak — pogrešno označena nuspojava zadržava mrtvi kod.

## Zašto je to važno

Ovo su dvije poluge iza "pošalji manje JS-a". Ispitivači žele da znate kako code splitting odlučuje *što se učitava kada*, tree shaking odlučuje *što je uopće unutra* i da tree shaking ovisi o statičnom ESM-u — detalj koji razdvaja ljude koji su stvarno tunirali bundle od onih koji su samo čitali o tome.

Code splitting

Tree shaking

Kompromisi

Zašto je to važno

Povezana pitanja