X'inhuma code splitting u tree shaking?

Question

IT Interview Practice · Accepted Answer

It-tnejn inaqqsu l-JavaScript li l-utenti jniżżlu. **Code splitting** jaqsam il-bundle f'chunks mgħobbija fuq talba; **tree shaking** ineħħi l-kodiċi li qatt ma tuża. Huma komplementari: aqsam *dak li* jitgħabba, u ħawwad barra l-kodiċi *mejjet* ġo kull chunk.

## Code splitting

Minflok bundle kbir wieħed, l-app tinqasam biex kull route jew feature tqila tkun chunk separat imġib biss meta jkun meħtieġ:

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

L-`import()` dinamiku huwa s-sinjal — il-bundler joħroġ file separat f'dak il-konfini.

## Tree shaking

Il-bundler janalizza b'mod statiku l-`import`/`export` tal-ES modules u jarmi l-exports li xejn ma jirreferenzja. Jaħdem biss ma' **ESM** (statiku, analizzabbli) — mhux `require` ta' CommonJS:

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

Jiddependi fuq `"sideEffects": false` f'`package.json` u imports għal kull funzjoni; barrel files jew moduli b'side effects jistgħu jegħlbuh.

## Kompromessi

- Splitting żejjed → ħafna requests żgħar u waterfalls; iġbor kodiċi relatat flimkien.
- Tree shaking huwa fraġli — side effect immarkat ħażin iżomm il-kodiċi mejjet ġewwa.

## Għaliex huwa importanti

Dawn huma ż-żewġ liegi wara "ibgħat inqas JS". L-intervistaturi jridu li tkun taf li code splitting jiddeċiedi *x'jitgħabba u meta*, tree shaking jiddeċiedi *x'hemm fih b'kollox*, u li tree shaking jiddependi fuq ESM statiku — dettall li jifred lin-nies li fil-fatt irfinaw bundle minn dawk li qraw biss dwarha.

Code splitting

Tree shaking

Kompromessi

Għaliex huwa importanti

Mistoqsijiet relatati