Czym są code splitting i tree shaking?

Question

IT Interview Practice · Accepted Answer

Oba tną JavaScript, który pobierają użytkownicy. **Code splitting** dzieli bundle na chunki ładowane na żądanie; **tree shaking** usuwa kod, którego nigdy nie używasz. Są komplementarne: podziel to, *co* się ładuje, i wytrząśnij *martwy* kod wewnątrz każdego chunka.

## Code splitting

Zamiast jednego wielkiego bundle'a aplikacja jest podzielona tak, że każda trasa lub ciężka funkcja to osobny chunk pobierany tylko wtedy, gdy jest potrzebny:

```js
// Podział wg tras: kod dashboardu nie jest pobierany, dopóki go nie odwiedzisz
const Dashboard = lazy(() => import("./routes/Dashboard")); // własny chunk

// Podział wg komponentów: ciężki edytor ładowany przy interakcji
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // pobierany po kliknięciu
  openEditor();
};
```

Dynamiczny `import()` to sygnał — bundler emituje osobny plik na tej granicy.

## Tree shaking

Bundler statycznie analizuje `import`/`export` modułów ES i odrzuca eksporty, do których nic się nie odwołuje. Działa tylko z **ESM** (statyczne, analizowalne) — nie z `require` z CommonJS:

```js
import { debounce } from "utils"; // zachowany jest tylko debounce; throttle itd. są wytrząśnięte
```

Opiera się na `"sideEffects": false` w `package.json` i importach per-funkcja; pliki barrel lub moduły z efektami ubocznymi mogą to pokonać.

## Kompromisy

- Nadmierny podział → wiele drobnych żądań i wodospady (waterfalls); grupuj powiązany kod.
- Tree shaking jest kruchy — źle oznaczony efekt uboczny zatrzymuje martwy kod.

## Dlaczego to ważne

To dwie dźwignie stojące za "wysyłaj mniej JS". Rekruterzy chcą, abyś wiedział, że code splitting decyduje, *co i kiedy się ładuje*, tree shaking decyduje, *co w ogóle się w tym znajduje*, oraz że tree shaking zależy od statycznego ESM — szczegół, który odróżnia ludzi, którzy faktycznie tunowali bundle, od tych, którzy tylko o tym czytali.

Code splitting

Tree shaking

Kompromisy

Dlaczego to ważne

Powiązane pytania