Çfarë janë code splitting dhe tree shaking?

Question

IT Interview Practice · Accepted Answer

Të dyja e presin JavaScript-in që përdoruesit shkarkojnë. **Code splitting** e thyen bundle-in në chunk-e të ngarkuar sipas nevojës; **tree shaking** heq kodin që nuk e përdorni kurrë. Janë plotësuese: ndani *çfarë* ngarkohet, shkundni jashtë kodin *e vdekur* brenda çdo chunk-u.

## Code splitting

Në vend të një bundle-i të vetëm të madh, app-i ndahet që çdo route ose veçori e rëndë të jetë një chunk i veçantë i shkarkuar vetëm kur nevojitet:

```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()` është sinjali — bundler-i lëshon një skedar të veçantë te ai kufi.

## Tree shaking

Bundler-i analizon statikisht `import`/`export` e ES module-ve dhe heq export-et që s'i referencon asgjë. Punon vetëm me **ESM** (statik, i analizueshëm) — jo me CommonJS `require`:

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

Bazohet te `"sideEffects": false` në `package.json` dhe importe për-funksion; barrel file-t ose module me side effect mund ta mundin.

## Kompromise

- Ndarje e tepërt → shumë kërkesa të vogla dhe waterfall; grupo kodin e ndërlidhur.
- Tree shaking është i brishtë — një side effect i keq-shënuar mban kodin e vdekur brenda.

## Pse ka rëndësi

Këto janë dy levat pas "dërgo më pak JS." Intervistuesit duan që të dini se code splitting vendos *çfarë ngarkohet kur*, tree shaking vendos *çfarë ka brenda fare*, dhe se tree shaking varet nga ESM statik — një detaj që i ndan njerëzit që kanë tune-uar faktikisht një bundle nga ata që kanë lexuar vetëm për të.

Code splitting

Tree shaking

Kompromise

Pse ka rëndësi

Pyetje të ngjashme