Menene code splitting da tree shaking?

Question

IT Interview Practice · Accepted Answer

Duka biyu suna yanke JavaScript ɗin da masu amfani ke download. **Code splitting** yana raba bundle zuwa chunks da ake loda a lokacin bukata; **tree shaking** yana cire code ɗin da ba ka taɓa amfani da shi ba. Suna cikawa juna: raba *abin* da ake loda, girgiza *dead* code cikin kowane chunk.

## Code splitting

Maimakon babban bundle guda, ana raba app don kowace route ko babbar feature ta zama wani chunk daban da ake fetch kawai lokacin bukata:

```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()` shi ne alama — bundler yana fitar da wani file daban a wannan iyaka.

## Tree shaking

Bundler yana bincika ES module `import`/`export` a static kuma yana zubar da exports ɗin da babu abin da ke maganarsu. Yana aiki kawai da **ESM** (static, analyzable) — ba CommonJS `require` ba:

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

Yana dogara ga `"sideEffects": false` a `package.json` da per-function imports; barrel files ko side-effectful modules na iya kayar da shi.

## Fa'ida da hasara

- Rarraba fiye da kima → requests ƙanana da yawa da waterfalls; haɗa related code.
- Tree shaking mai rauni ne — side effect da aka yiwa alama ba daidai ba yana riƙe dead code.

## Me ya sa yake da muhimmanci

Waɗannan su ne lever guda biyu bayan "ship less JS." Masu tambayoyi suna son ka san code splitting yana yanke shawara *abin da ke loda yaushe*, tree shaking yana yanke shawara *abin da ke ciki gaba ɗaya*, kuma cewa tree shaking ya dogara ga static ESM — dalla-dalla da ke raba mutanen da suka tune bundle da gaske da waɗanda suka karanta game da shi kawai.

Code splitting

Tree shaking

Fa'ida da hasara

Me ya sa yake da muhimmanci

Tambayoyi masu alaƙa