Code splitting na tree shaking ni nini?

Question

IT Interview Practice · Accepted Answer

Zote hupunguza JavaScript ambayo watumiaji hupakua. **Code splitting** huvunja bundle kuwa chunks zinazopakiwa kwa mahitaji; **tree shaking** huondoa code usiyoitumia kamwe. Zinakamilishana: gawanya *kile* kinachopakia, tikisa nje *code iliyokufa* ndani ya kila chunk.

## Code splitting

Badala ya bundle moja kubwa, app hugawanywa ili kila route au feature nzito iwe chunk tofauti inayopakiwa tu inapohitajika:

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

Dynamic `import()` ndiyo ishara — bundler hutoa faili tofauti kwenye mpaka huo.

## Tree shaking

Bundler huchambua kistatiki ES module `import`/`export` na huondoa exports ambazo hakuna kinachozirejelea. Hufanya kazi tu na **ESM** (static, inayochambulika) — si CommonJS `require`:

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

Inategemea `"sideEffects": false` ndani ya `package.json` na per-function imports; barrel files au modules zenye side-effects zinaweza kuiharibu.

## Faida na hasara

- Kugawanya kupita kiasi → maombi mengi madogo na waterfalls; kusanya code inayohusiana pamoja.
- Tree shaking ni dhaifu — side effect iliyowekwa alama vibaya huweka code iliyokufa ndani.

## Kwa nini ni muhimu

Hizi ni levers mbili zilizo nyuma ya "tuma JS kidogo." Wahojaji wanataka ujue code splitting huamua *kinachopakia lini*, tree shaking huamua *kilicho ndani kabisa*, na kwamba tree shaking hutegemea static ESM — kipengele kinachotofautisha watu waliopanga bundle kweli na wale walioisoma tu.

Code splitting

Tree shaking

Faida na hasara

Kwa nini ni muhimu

Maswali yanayohusiana