Co jsou code splitting a tree shaking?

Question

IT Interview Practice · Accepted Answer

Obojí zmenšuje JavaScript, který si uživatelé stahují. **Code splitting** rozděluje bundle na chunky načítané na vyžádání; **tree shaking** odstraňuje kód, který nikdy nepoužijete. Doplňují se: rozdělte *co* se načte, vytřeste *mrtvý* kód uvnitř každého chunku.

## Code splitting

Místo jednoho velkého bundlu je aplikace rozdělena tak, aby každá route nebo náročná funkce byla samostatný chunk načtený jen tehdy, když je potřeba:

```js
// Rozdělení podle route: kód dashboardu se nestáhne, dokud jej nenavštívíte
const Dashboard = lazy(() => import("./routes/Dashboard")); // vlastní chunk

// Rozdělení podle komponenty: náročný editor načten při interakci
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // načten při kliknutí
  openEditor();
};
```

Dynamický `import()` je signál — bundler na tomto rozhraní vygeneruje samostatný soubor.

## Tree shaking

Bundler staticky analyzuje `import`/`export` ES modulů a zahazuje exporty, na které nic neodkazuje. Funguje jen s **ESM** (statický, analyzovatelný) — ne s CommonJS `require`:

```js
import { debounce } from "utils"; // ponechá se jen debounce; throttle atd. se vytřesou
```

Spoléhá na `"sideEffects": false` v `package.json` a na importy jednotlivých funkcí; barrel soubory nebo moduly s side efekty jej mohou zmařit.

## Kompromisy

- Přílišné rozdělování → mnoho drobných požadavků a waterfally; seskupujte související kód.
- Tree shaking je křehký — špatně označený side efekt ponechá mrtvý kód uvnitř.

## Proč je to důležité

Toto jsou dvě páky za heslem „posílej méně JS“. Tazatelé chtějí, abyste věděli, že code splitting rozhoduje o tom, *co se kdy načte*, tree shaking rozhoduje o tom, *co v tom vůbec je*, a že tree shaking závisí na statickém ESM — detail, který odlišuje lidi, kteří opravdu ladili bundle, od těch, kdo o tom jen četli.

Code splitting

Tree shaking

Kompromisy

Proč je to důležité

Související otázky