दोनों users द्वारा download की जाने वाली JavaScript को कम करते हैं। Code splitting bundle को माँग पर load होने वाले chunks में तोड़ता है; tree shaking ऐसे code को हटाता है जिसका आप कभी उपयोग नहीं करते। ये पूरक हैं: क्या load होता है उसे split करें, हर chunk के अंदर मृत code को shake out करें।
एक बड़े bundle के बजाय, app को इस तरह split किया जाता है कि हर route या भारी feature एक अलग chunk हो जो केवल जरूरत पड़ने पर fetch हो:
// 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();
};
dynamic import() संकेत है — bundler उस सीमा पर एक अलग file उत्सर्जित करता है।
bundler ES module import/export का statically विश्लेषण करता है और उन exports को गिरा देता है जिन्हें कुछ भी reference नहीं करता। यह केवल ESM (static, विश्लेषण योग्य) के साथ काम करता है — CommonJS require के साथ नहीं:
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
यह package.json में "sideEffects": false और per-function imports पर निर्भर करता है; barrel files या side-effectful modules इसे विफल कर सकते हैं।
ये "कम JS भेजो" के पीछे के दो levers हैं। Interviewers चाहते हैं कि आप जानें कि code splitting तय करता है क्या कब load होता है, tree shaking तय करता है उसमें बिल्कुल क्या है, और यह कि tree shaking static ESM पर निर्भर करता है — एक विवरण जो उन लोगों को अलग करता है जिन्होंने वास्तव में एक bundle tune किया है उनसे जिन्होंने केवल इसके बारे में पढ़ा है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें