Mikä kasvattaa JS-bundlea, ja miksi koko haittaa?

Question

IT Interview Practice · Accepted Answer

**Bundle** on JavaScript, jonka rakennustyökalusi paketoi ja toimittaa selaimeen. Se kasvaa pääasiassa **riippuvuuksista**, **toistetusta koodista** ja **koodin toimittamisesta, jota sivu ei vielä tarvitse**.

## Mikä paisuttaa sitä

- **Raskaat kirjastot** — yksi päivämäärä- tai ikonikirjasto voi lisätä satoja kilotavuja. Koko `lodash`in tuominen yhtä funktiota varten vetää mukanaan kaiken.
- **Kaiken tuominen** sen sijaan, mitä käytät:

```js
import _ from "lodash";           // ~70KB — koko kirjasto
import debounce from "lodash/debounce"; // ~2KB — vain tarvitsemasi funktio
```

- **Ei code splittingia** — koko sovellus (jokainen reitti, jokainen modaali) on niputettu yhteen tiedostoon, joka ladataan etukäteen.
- **Polyfillit ja toistetut riippuvuudet** — kaksi versiota samasta paketista niputettu kahdesti.

## Miksi koko haittaa

Tavut ovat pieni ongelma; **jäsennys ja suoritus** JS:n osalta on iso. Selaimen on ladattava, sitten jäsennettävä, käännettävä ja ajettava jokainen tavu pääsäikeessä — ja se on paljon hitaampaa keskitason puhelimella kuin kannettavalla. Raskas JS viivyttää interaktiivisuutta ja huonontaa suoraan **INP**:tä ja **LCP**:tä.

## Miksi se on tärkeää

"Lisää vain kirjasto" on tapa, jolla sovelluksista tulee hiljaa hitaita. Haastattelijat haluavat nähdä, että ajattelet *kustannusta per riippuvuus* ja tartut funktiokohtaisiin importteihin, tree shakingiin ja code splittingiin ennen kuin bundle paisuu — varsinkin kun käyttäjiesi puhelimet ovat paljon heikompia kuin kehityskoneesi.

Mikä paisuttaa sitä

Miksi koko haittaa

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset