Beide verminderen de JavaScript die gebruikers downloaden. Code splitting breekt de bundle op in chunks die op verzoek worden geladen; tree shaking verwijdert code die je nooit gebruikt. Ze zijn complementair: splits wat er laadt, schud dode code uit binnen elke chunk.
In plaats van één grote bundle wordt de app zo gesplitst dat elke route of zware feature een aparte chunk is die alleen wordt opgehaald wanneer nodig:
// Route-gebaseerde split: de dashboard-code wordt pas gedownload wanneer je hem bezoekt
const Dashboard = lazy(() => import("./routes/Dashboard")); // eigen chunk
// Component-gebaseerde split: zware editor geladen bij interactie
button.onclick = async () => {
const { openEditor } = await import("./editor"); // opgehaald bij klik
openEditor();
};
De dynamische import() is het signaal — de bundler produceert een apart bestand op die grens.
De bundler analyseert statisch ES-module import/export en laat exports vallen die nergens naar verwezen worden. Het werkt alleen met ESM (statisch, analyseerbaar) — niet met CommonJS require:
import { debounce } from "utils"; // alleen debounce blijft behouden; throttle enz. worden uitgeschud
Het berust op "sideEffects": false in package.json en per-functie imports; barrel files of side-effect-hebbende modules kunnen het verslaan.
Dit zijn de twee hefbomen achter "verstuur minder JS." Interviewers willen dat je weet dat code splitting bepaalt wat wanneer laadt, tree shaking bepaalt wat er überhaupt in zit, en dat tree shaking afhangt van statische ESM — een detail dat de mensen die daadwerkelijk een bundle hebben getuned onderscheidt van degenen die er alleen over hebben gelezen.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren