code splitting र tree shaking भनेको के हो?

Question

IT Interview Practice · Accepted Answer

दुवैले प्रयोगकर्ताले download गर्ने JavaScript घटाउँछन्। Code splitting ले bundle लाई on demand load हुने chunk मा तोड्छ; tree shaking ले तपाईंले कहिल्यै प्रयोग नगर्ने code हटाउँछ। तिनीहरू पूरक छन्: के load हुन्छ split गर्नुहोस्, प्रत्येक chunk भित्रको मृत code shake गर्नुहोस्।

Code splitting

एउटा ठूलो bundle को सट्टा, app यसरी split हुन्छ कि प्रत्येक route वा भारी feature आवश्यक हुँदा मात्र fetch हुने छुट्टै chunk बन्छ:

js


  = ( ()); 


button. =  () => {
   { openEditor } =  (); 
  ();
};

## Code splitting

एउटा ठूलो bundle को सट्टा, app यसरी split हुन्छ कि प्रत्येक route वा भारी feature आवश्यक हुँदा मात्र fetch हुने छुट्टै chunk बन्छ:

```js
// 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 ले त्यो boundary मा छुट्टै file निकाल्छ।

## Tree shaking

Bundler ले ES module `import`/`export` statically विश्लेषण गर्छ र कसैले reference नगरेका export हटाउँछ। यो **ESM** (static, विश्लेषणयोग्य) सँग मात्र काम गर्छ — CommonJS `require` सँग होइन:

```js
import { debounce } from "utils"; // only debounce is kept; throttle, etc. are shaken out
```

यो `package.json` मा `"sideEffects": false` र per-function import मा निर्भर छ; barrel file वा side-effect भएका module ले यसलाई बिगार्न सक्छन्।

## Trade-off

- अत्यधिक split → धेरै साना request र waterfall; सम्बन्धित code समूहबद्ध गर्नुहोस्।
- Tree shaking भंगुर छ — गलत चिन्ह लगाइएको side effect ले मृत code राख्छ।

## यो किन महत्त्वपूर्ण छ

यी "कम JS पठाउने" पछाडिका दुई lever हुन्। Interviewer हरू तपाईंले code splitting ले *कहिले के load हुन्छ* निर्धारण गर्छ, tree shaking ले *त्यसमा के हुन्छ नै* निर्धारण गर्छ, र tree shaking static ESM मा निर्भर छ भन्ने जानेको चाहन्छन् — यो विवरणले bundle साँच्चै tune गरेकालाई मात्र पढेकाबाट छुट्याउँछ।

Code splitting

Tree shaking

Trade-off

यो किन महत्त्वपूर्ण छ

सम्बन्धित प्रश्नहरू