Ambele reduc JavaScript-ul pe care utilizatorii îl descarcă. Code splitting împarte bundle-ul în chunk-uri încărcate la cerere; tree shaking elimină codul pe care nu îl folosești niciodată. Sunt complementare: împarte ce se încarcă, scutură codul mort din interiorul fiecărui chunk.
În loc de un singur bundle mare, aplicația este împărțită astfel încât fiecare rută sau funcționalitate grea este un chunk separat, adus doar când e nevoie:
// Route-based split: the dashboard code isn't downloaded until you visit it
const Dashboard = lazy(() => import("./routes/Dashboard")); // its own chunk
// Component-based split: heavy editor loaded on interaction
button.onclick = async () => {
const { openEditor } = await import("./editor"); // fetched on click
openEditor();
};
import() dinamic este semnalul — bundler-ul emite un fișier separat la acea graniță.
Bundler-ul analizează static import/export din modulele ES și elimină export-urile pe care nu le referențiază nimic. Funcționează doar cu ESM (static, analizabil) — nu cu require din CommonJS:
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
Se bazează pe "sideEffects": false în package.json și pe importuri per funcție; fișierele barrel sau modulele cu efecte secundare îl pot anula.
Acestea sunt cele două pârghii din spatele lui „trimite mai puțin JS”. Intervievatorii vor să știi că code splitting decide ce se încarcă și când, tree shaking decide ce se află înăuntru în general și că tree shaking depinde de ESM static — un detaliu care îi separă pe cei care chiar au reglat un bundle de cei care doar au citit despre asta.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează