Dėl ko JS bundle auga ir kodėl dydis kenkia?

Question

IT Interview Practice · Accepted Answer

**Bundle** yra JavaScript, kurį jūsų build įrankis supakuoja ir siunčia į naršyklę. Jis auga daugiausia dėl **priklausomybių**, **dubliuoto kodo** ir **kodo, kurio puslapiui dar nereikia, siuntimo**.

## Kas jį išpučia

- **Sunkios bibliotekos** — viena datos ar piktogramų biblioteka gali pridėti šimtus KB. Viso `lodash` importavimas vienai funkcijai pritraukia visą jį.
- **Visko importavimas** vietoj to, ką naudojate:

```js
import _ from "lodash";           // ~70KB — the entire library
import debounce from "lodash/debounce"; // ~2KB — just the function you need
```

- **Jokio code splitting** — visa programa (kiekvienas maršrutas, kiekvienas modalas) supakuota į vieną failą, įkeliamą iš anksto.
- **Polyfill ir dubliuotos priklausomybės** — dvi to paties paketo versijos supakuotos du kartus.

## Kodėl dydis kenkia

Baitai yra maža problema; **analizavimas ir vykdymas** yra didelė. Naršyklė turi atsisiųsti, tada analizuoti, kompiliuoti ir paleisti kiekvieną baitą pagrindinėje gijoje — ir tai daug lėčiau vidutinės klasės telefone nei nešiojamajame. Sunkus JS atideda interaktyvumą ir tiesiogiai blogina **INP** bei **LCP**.

## Kodėl tai svarbu

„Tiesiog pridėk biblioteką“ yra būdas, kaip programos tyliai sulėtėja. Interviuotojai nori pamatyti, kad galvojate apie *kainą už priklausomybę* ir griebiatės importų už funkciją, tree shaking ir code splitting, kol bundle neišsipūtė — ypač todėl, kad jūsų naudotojų telefonai yra kur kas silpnesni nei jūsų kūrimo mašina.

Kas jį išpučia

Kodėl dydis kenkia

Kodėl tai svarbu

Susiję klausimai