Co powoduje wzrost bundle'a JS i dlaczego rozmiar szkodzi?

Question

IT Interview Practice · Accepted Answer

**Bundle** to JavaScript, który twoje narzędzie budujące pakuje i wysyła do przeglądarki. Rośnie głównie z powodu **zależności**, **zduplikowanego kodu** i **wysyłania kodu, którego strona jeszcze nie potrzebuje**.

## Co go nadmuchuje

- **Ciężkie biblioteki** — jedna biblioteka dat lub ikon może dodać setki KB. Importowanie całego `lodash` dla jednej funkcji ściąga całość.
- **Importowanie wszystkiego** zamiast tego, czego używasz:

```js
import _ from "lodash";           // ~70KB — cała biblioteka
import debounce from "lodash/debounce"; // ~2KB — tylko funkcja, której potrzebujesz
```

- **Brak code splitting** — cała aplikacja (każda trasa, każdy modal) jest zbundlowana w jeden plik ładowany na starcie.
- **Polyfille i zduplikowane zależności** — dwie wersje tej samej paczki zbundlowane dwukrotnie.

## Dlaczego rozmiar szkodzi

Bajty to mały problem; **parsowanie i wykonywanie** JS to duży. Przeglądarka musi pobrać, a następnie sparsować, skompilować i uruchomić każdy bajt na głównym wątku — a to znacznie wolniej na telefonie średniej klasy niż na laptopie. Ciężki JS opóźnia interaktywność i bezpośrednio pogarsza **INP** oraz **LCP**.

## Dlaczego to ważne

"Po prostu dodaj bibliotekę" to sposób, w jaki aplikacje po cichu stają się wolne. Rekruterzy chcą zobaczyć, że myślisz o *koszcie na zależność* i sięgasz po importy per-funkcja, tree shaking oraz code splitting, zanim bundle się rozdmucha — zwłaszcza że telefony twoich użytkowników są znacznie słabsze niż twoja maszyna deweloperska.

Co go nadmuchuje

Dlaczego rozmiar szkodzi

Dlaczego to ważne

Powiązane pytania