Και τα δύο μειώνουν το JavaScript που κατεβάζουν οι χρήστες. Το code splitting σπάει το bundle σε chunks που φορτώνονται on demand· το tree shaking αφαιρεί κώδικα που δεν χρησιμοποιείτε ποτέ. Είναι συμπληρωματικά: κάντε split τι φορτώνει, και shake out τον νεκρό κώδικα μέσα σε κάθε chunk.
Αντί για ένα μεγάλο bundle, η εφαρμογή χωρίζεται ώστε κάθε route ή βαρύ feature να είναι ένα ξεχωριστό chunk που φορτώνεται μόνο όταν χρειάζεται:
// 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() είναι το σήμα — ο bundler εκπέμπει ένα ξεχωριστό αρχείο σε αυτό το όριο.
Ο bundler αναλύει στατικά τα import/export των ES modules και απορρίπτει τα exports που δεν αναφέρει τίποτα. Λειτουργεί μόνο με ESM (στατικό, αναλύσιμο) — όχι με το CommonJS require:
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
Βασίζεται στο "sideEffects": false στο package.json και σε per-function imports· τα barrel files ή τα modules με side effects μπορούν να το ακυρώσουν.
Αυτοί είναι οι δύο μοχλοί πίσω από το "στείλε λιγότερο JS." Οι συνεντευξιαστές θέλουν να ξέρετε ότι το code splitting αποφασίζει τι φορτώνει και πότε, το tree shaking αποφασίζει τι υπάρχει καν μέσα, και ότι το tree shaking εξαρτάται από στατικό ESM — μια λεπτομέρεια που ξεχωρίζει όσους έχουν πραγματικά συντονίσει ένα bundle από όσους απλώς έχουν διαβάσει γι' αυτό.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά