რა ზრდის JS bundle-ს და რატომ აზიანებს ზომა?

Question

IT Interview Practice · Accepted Answer

**bundle** არის JavaScript, რომელსაც შენი build tool აფუთავს და ბრაუზერს უგზავნის. ის ძირითადად იზრდება **dependency-ებით**, **დუბლირებული კოდით** და **კოდის გაგზავნით, რომელიც გვერდს ჯერ არ სჭირდება**.

## რა ბერავს მას

- **მძიმე ბიბლიოთეკები** — ერთმა date ან icon ბიბლიოთეკამ შეიძლება ასობით KB დაამატოს. მთელი `lodash`-ის იმპორტი ერთი ფუნქციისთვის მთელს მას ითრევს.
- **ყველაფრის იმპორტი** იმის ნაცვლად, რასაც იყენებ:

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

- **code splitting-ის არარსებობა** — მთელი აპლიკაცია (ყველა route, ყველა modal) ერთ ფაილში იფუთება, რომელიც წინასწარ იტვირთება.
- **Polyfill-ები და დუბლირებული dependency-ები** — ერთი და იმავე პაკეტის ორი ვერსია ორჯერ დაფუთული.

## რატომ აზიანებს ზომა

ბაიტები პატარა პრობლემაა; JS-ის **დამუშავება და შესრულება** დიდი პრობლემაა. ბრაუზერმა უნდა ჩამოტვირთოს, შემდეგ დაამუშაოს, დააკომპილიროს და გაუშვას ყოველი ბაიტი main thread-ზე — და ეს ბევრად უფრო ნელია საშუალო კლასის ტელეფონზე, ვიდრე ლეპტოპზე. მძიმე JS აჭიანურებს ინტერაქტიულობას და პირდაპირ აუარესებს **INP**-სა და **LCP**-ს.

## რატომ არის ეს მნიშვნელოვანი

„უბრალოდ დაამატე ბიბლიოთეკა“ არის ის, თუ როგორ ხდებიან აპლიკაციები ჩუმად ნელი. ინტერვიუერებს სურთ დაინახონ, რომ *dependency-ის ღირებულებაზე* ფიქრობ და მიმართავ თითო-ფუნქციურ იმპორტებს, tree shaking-სა და code splitting-ს, სანამ bundle გაიბერება — მითუმეტეს, რომ შენი მომხმარებლების ტელეფონები შენს dev მანქანაზე ბევრად სუსტია.

რა ბერავს მას

რატომ აზიანებს ზომა

რატომ არის ეს მნიშვნელოვანი

დაკავშირებული კითხვები