Apa iku code splitting lan tree shaking?

Question

IT Interview Practice · Accepted Answer

Loro-lorone ngurangi JavaScript sing diundhuh pangguna. **Code splitting** mecah bundle dadi chunk sing dimuat nalika dibutuhake; **tree shaking** ngilangi kode sing ora tau sampeyan enggo. Loro-lorone saling nglengkapi: pisahake *apa* sing dimuat, buwang kode *mati* ing saben chunk.

## Code splitting

Tinimbang siji bundle gedhe, app dipisah supaya saben route utawa fitur abot dadi chunk kapisah sing dijupuk mung nalika dibutuhake:

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

`import()` dinamis iku sinyale — bundler ngasilake file kapisah ing wates kasebut.

## Tree shaking

Bundler nganalisa `import`/`export` ES module kanthi static lan mbuwang export sing ora dirujuk apa-apa. Iki mung mlaku karo **ESM** (static, bisa dianalisa) — dudu `require` CommonJS:

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

Iki gumantung marang `"sideEffects": false` ing `package.json` lan impor saben-fungsi; barrel file utawa modul sing duwe side-effect bisa ngrusak iki.

## Trade-off

- Kakehan mecah → akeh request cilik lan waterfall; klompokna kode sing gegandhengan.
- Tree shaking iku rapuh — side effect sing salah tandha bakal ngunci kode mati tetep ana.

## Kenapa iki penting

Iki loro tuas ing sabalike "ngirim JS luwih sithik." Pewawancara kepengin sampeyan ngerti yen code splitting nemtokake *apa sing dimuat lan kapan*, tree shaking nemtokake *apa sing ana ing njero*, lan yen tree shaking gumantung marang ESM static — sawijining rincian sing mbedakake wong sing pancen wis nyetel bundle saka sing mung tau maca babagan iku.

Code splitting

Tree shaking

Trade-off

Kenapa iki penting

Pitakon sing gegandhengan