Keduanya memangkas JavaScript yang diunduh pengguna. Code splitting memecah bundle menjadi chunk yang dimuat sesuai kebutuhan; tree shaking membuang kode yang tidak pernah kamu pakai. Keduanya saling melengkapi: split apa yang dimuat, shake out kode mati di dalam setiap chunk.
Alih-alih satu bundle besar, aplikasi dipecah sehingga setiap route atau fitur berat menjadi chunk terpisah yang di-fetch hanya saat dibutuhkan:
// Split berbasis route: kode dashboard tidak diunduh hingga kamu mengunjunginya
const Dashboard = lazy(() => import("./routes/Dashboard")); // chunk-nya sendiri
// Split berbasis komponen: editor berat dimuat saat interaksi
button.onclick = async () => {
const { openEditor } = await import("./editor"); // di-fetch saat klik
openEditor();
};
import() dinamis adalah sinyalnya — bundler mengeluarkan file terpisah pada batas tersebut.
Bundler menganalisis import/export ES module secara statis dan membuang export yang tidak direferensikan apa pun. Ia hanya bekerja dengan ESM (statis, dapat dianalisis) — bukan require CommonJS:
import { debounce } from "utils"; // hanya debounce yang disimpan; throttle, dll. di-shake out
Ia bergantung pada "sideEffects": false di package.json dan import per-fungsi; barrel file atau modul dengan side effect bisa mengalahkannya.
Inilah dua tuas di balik "kirim lebih sedikit JS." Pewawancara ingin kamu tahu code splitting menentukan apa yang dimuat kapan, tree shaking menentukan apa yang ada di dalamnya sama sekali, dan bahwa tree shaking bergantung pada ESM statis — detail yang memisahkan orang yang benar-benar pernah menyetel bundle dari mereka yang hanya membaca tentangnya.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi