Apa yang membuatkan bundle JS membesar, dan mengapa saiz menjejaskan?

Question

IT Interview Practice · Accepted Answer

Suatu **bundle** ialah JavaScript yang alat build anda pakej dan hantar ke browser. Ia membesar terutamanya daripada **dependency**, **kod bertindih (duplicate)**, dan **menghantar kod yang halaman belum perlukan lagi**.

## Apa yang mengembangkannya

- **Pustaka berat** — satu pustaka tarikh atau ikon boleh menambah ratusan KB. Mengimport keseluruhan `lodash` untuk satu fungsi menarik masuk keseluruhannya.
- **Mengimport segala-galanya** dan bukannya apa yang anda guna:

```js
import _ from "lodash";           // ~70KB — keseluruhan pustaka
import debounce from "lodash/debounce"; // ~2KB — hanya fungsi yang anda perlukan
```

- **Tiada code splitting** — keseluruhan aplikasi (setiap route, setiap modal) dibundle ke dalam satu fail yang dimuatkan di awal.
- **Polyfill dan dependency bertindih** — dua versi pakej yang sama dibundle dua kali.

## Mengapa saiz menjejaskan

Bait ialah masalah kecil; **penghuraian dan pelaksanaan** JS ialah masalah besar. Browser mesti memuat turun, kemudian hurai, kompil, dan jalankan setiap bait pada main thread — dan itu jauh lebih perlahan pada telefon peringkat pertengahan berbanding pada komputer riba. JS berat melengahkan interaktiviti dan secara langsung memburukkan **INP** dan **LCP**.

## Mengapa ia penting

"Tambah saja pustaka itu" ialah cara aplikasi menjadi perlahan secara senyap. Penemu duga mahu melihat anda memikirkan *kos setiap dependency* dan mencapai import setiap-fungsi, tree shaking, dan code splitting sebelum bundle membengkak — terutamanya kerana telefon pengguna anda jauh lebih lemah daripada mesin pembangunan anda.

Apa yang mengembangkannya

Mengapa saiz menjejaskan

Mengapa ia penting

Soalan berkaitan