Mitä code splitting ja tree shaking ovat?

Question

IT Interview Practice · Accepted Answer

Molemmat karsivat JavaScriptiä, jonka käyttäjät lataavat. Code splitting pilkkoo bundlen chunkeiksi, jotka ladataan tarvittaessa; tree shaking poistaa koodin, jota et koskaan käytä. Ne täydentävät toisiaan: pilko mitä ladataan, ravista pois kuollut koodi jokaisen chunkin sisältä.

Code splitting

Yhden ison bundlen sijaan sovellus pilkotaan niin, että jokainen reitti tai raskas ominaisuus on erillinen chunk, joka haetaan vain tarvittaessa:

js

## Code splitting

Yhden ison bundlen sijaan sovellus pilkotaan niin, että jokainen reitti tai raskas ominaisuus on erillinen chunk, joka haetaan vain tarvittaessa:

```js
// Reittipohjainen pilkkominen: dashboard-koodia ei ladata ennen kuin vierailet siellä
const Dashboard = lazy(() => import("./routes/Dashboard")); // oma chunk

// Komponenttipohjainen pilkkominen: raskas editori ladataan vuorovaikutuksessa
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // haetaan klikkauksesta
  openEditor();
};
```

Dynaaminen `import()` on signaali — bundler tuottaa erillisen tiedoston kyseisellä rajalla.

## Tree shaking

Bundler analysoi staattisesti ES-moduulien `import`/`export`-lauseet ja pudottaa exportit, joihin mikään ei viittaa. Se toimii vain **ESM**:n kanssa (staattinen, analysoitava) — ei CommonJS `require`n kanssa:

```js
import { debounce } from "utils"; // vain debounce säilytetään; throttle jne. ravistetaan pois
```

Se nojaa `"sideEffects": false`-määritykseen `package.json`issa ja funktiokohtaisiin importteihin; barrel-tiedostot tai sivuvaikutuksiset moduulit voivat tehdä siitä tehottoman.

## Kompromissit

- Ylipilkkominen → monta pientä pyyntöä ja vesiputouksia; ryhmittele toisiinsa liittyvä koodi.
- Tree shaking on hauras — väärin merkitty sivuvaikutus pitää kuolleen koodin.

## Miksi se on tärkeää

Nämä ovat kaksi vipua "toimita vähemmän JS:ää" -periaatteen takana. Haastattelijat haluavat, että tiedät code splittingin päättävän *mitä ladataan milloin*, tree shakingin päättävän *mitä siinä on ylipäätään*, ja että tree shaking riippuu staattisesta ESM:stä — yksityiskohta, joka erottaa ne, jotka ovat todella virittäneet bundlen, niistä, jotka ovat vain lukeneet siitä.

Code splitting

Tree shaking

Kompromissit

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset