Mi az a code splitting és a tree shaking?

Question

IT Interview Practice · Accepted Answer

Mindkettő csökkenti a felhasználók által letöltött JavaScriptet. A code splitting chunkokra bontja a bundle-t, amelyeket igény szerint tölt be; a tree shaking eltávolítja a soha nem használt kódot. Kiegészítik egymást: felbontod, mi töltődik be, és kirázod a holt kódot minden chunkból.

Code splitting

Egyetlen nagy bundle helyett az alkalmazás úgy van felbontva, hogy minden route vagy nehéz funkció külön chunk, amely csak szükség esetén töltődik le:

## Code splitting

Egyetlen nagy bundle helyett az alkalmazás úgy van felbontva, hogy minden route vagy nehéz funkció külön chunk, amely csak szükség esetén töltődik le:

```js
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk

// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // fetched on click
  openEditor();
};
```

A dinamikus `import()` a jelzés — a bundler egy külön fájlt bocsát ki annál a határnál.

## Tree shaking

A bundler statikusan elemzi az ES module `import`/`export`-jait, és eldobja azokat az exportokat, amelyekre semmi sem hivatkozik. Csak **ESM**-mel működik (statikus, elemezhető) — a CommonJS `require`-rel nem:

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

A `package.json`-ban lévő `"sideEffects": false`-ra és a függvényenkénti importokra támaszkodik; a barrel fájlok vagy a mellékhatásos modulok meghiúsíthatják.

## Kompromisszumok

- Túlzott felbontás → sok apró kérés és waterfall; csoportosítsd az összetartozó kódot.
- A tree shaking törékeny — egy rosszul jelölt mellékhatás bent tartja a holt kódot.

## Miért fontos

Ez a két kar a „szállíts kevesebb JS-t” mögött. Az interjúztatók azt akarják, hogy tudd: a code splitting azt dönti el, *mi mikor töltődik be*, a tree shaking pedig azt, *mi van benne egyáltalán*, és hogy a tree shaking a statikus ESM-től függ — ez a részlet választja el azokat, akik ténylegesen finomhangoltak egy bundle-t, azoktól, akik csak olvastak róla.

Code splitting

Tree shaking

Kompromisszumok

Miért fontos

Kapcsolódó kérdések