Kas yra code splitting ir tree shaking?

Question

IT Interview Practice · Accepted Answer

Abu sumažina JavaScript, kurį naudotojai atsisiunčia. **Code splitting** suskaido bundle į chunk, įkeliamus pagal poreikį; **tree shaking** pašalina kodą, kurio niekada nenaudojate. Jie papildo vienas kitą: skaidykite *tai, kas* įsikelia, iškratykite *negyvą* kodą kiekviename chunk.

## Code splitting

Vietoj vieno didelio bundle programa suskaidoma taip, kad kiekvienas maršrutas ar sunki funkcija būtų atskiras chunk, atsiunčiamas tik prireikus:

```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();
};
```

Dinaminis `import()` yra signalas — bundleris ties ta riba išleidžia atskirą failą.

## Tree shaking

Bundleris statiškai analizuoja ES module `import`/`export` ir atmeta eksportus, į kuriuos niekas nesikreipia. Tai veikia tik su **ESM** (statiškas, analizuojamas) — ne su CommonJS `require`:

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

Jis remiasi `"sideEffects": false` faile `package.json` ir importais už funkciją; barrel failai arba šalutinius efektus turintys moduliai gali jį sugadinti.

## Kompromisai

- Per didelis skaidymas → daug mažų užklausų ir waterfall; grupuokite susijusį kodą.
- Tree shaking yra trapus — neteisingai pažymėtas šalutinis efektas palieka negyvą kodą.

## Kodėl tai svarbu

Tai yra du svertai už „siųsk mažiau JS“. Interviuotojai nori, kad žinotumėte: code splitting nusprendžia, *kas įsikelia kada*, tree shaking nusprendžia, *kas apskritai yra viduje*, ir kad tree shaking priklauso nuo statinio ESM — detalė, skirianti tuos, kurie iš tikrųjų derino bundle, nuo tų, kurie apie tai tik skaitė.

Code splitting

Tree shaking

Kompromisai

Kodėl tai svarbu

Susiję klausimai