Τι κάνει ένα JS bundle να μεγαλώνει, και γιατί το μέγεθος βλάπτει;

Question

IT Interview Practice · Accepted Answer

Ένα **bundle** είναι το JavaScript που το build tool σας πακετάρει και στέλνει στον browser. Μεγαλώνει κυρίως από **dependencies**, **διπλότυπο κώδικα** και **αποστολή κώδικα που η σελίδα δεν χρειάζεται ακόμη**.

## Τι το φουσκώνει

- **Βαριές βιβλιοθήκες** — μια βιβλιοθήκη ημερομηνιών ή εικονιδίων μπορεί να προσθέσει εκατοντάδες KB. Το import ολόκληρου του `lodash` για μία συνάρτηση τραβά μέσα ολόκληρο το πράγμα.
- **Import των πάντων** αντί για αυτό που χρησιμοποιείτε:

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

- **Καθόλου code splitting** — ολόκληρη η εφαρμογή (κάθε route, κάθε modal) πακετάρεται σε ένα αρχείο που φορτώνεται εξαρχής.
- **Polyfills και διπλότυπα dependencies** — δύο εκδόσεις του ίδιου πακέτου πακεταρισμένες δύο φορές.

## Γιατί το μέγεθος βλάπτει

Τα bytes είναι το μικρό πρόβλημα· το **parsing και η εκτέλεση** του JS είναι το μεγάλο. Ο browser πρέπει να κατεβάσει, μετά να κάνει parse, compile και run κάθε byte στο main thread — και αυτό είναι πολύ πιο αργό σε ένα μεσαίας κατηγορίας κινητό απ' ό,τι σε ένα laptop. Το βαρύ JS καθυστερεί την interactivity και χειροτερεύει άμεσα το **INP** και το **LCP**.

## Γιατί έχει σημασία

Το "απλώς πρόσθεσε τη βιβλιοθήκη" είναι ο τρόπος με τον οποίο οι εφαρμογές γίνονται σιωπηλά αργές. Οι συνεντευξιαστές θέλουν να δουν ότι σκέφτεστε το *κόστος ανά dependency* και καταφεύγετε σε per-function imports, tree shaking και code splitting πριν φουσκώσει το bundle — ειδικά επειδή τα κινητά των χρηστών σας είναι πολύ πιο αδύναμα από τη μηχανή ανάπτυξής σας.

Τι το φουσκώνει

Γιατί το μέγεθος βλάπτει

Γιατί έχει σημασία

Σχετικές ερωτήσεις