code splitting ਅਤੇ tree shaking ਕੀ ਹਨ?

Question

IT Interview Practice · Accepted Answer

ਦੋਵੇਂ ਉਸ JavaScript ਨੂੰ ਘਟਾਉਂਦੇ ਹਨ ਜੋ ਉਪਭੋਗਤਾ download ਕਰਦੇ ਹਨ। Code splitting bundle ਨੂੰ ਮੰਗ 'ਤੇ load ਹੋਣ ਵਾਲੇ chunks ਵਿੱਚ ਤੋੜਦਾ ਹੈ; tree shaking ਉਹ code ਹਟਾਉਂਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਕਦੇ ਨਹੀਂ ਵਰਤਦੇ। ਇਹ ਪੂਰਕ ਹਨ: ਕੀ load ਹੁੰਦਾ ਹੈ ਉਸਨੂੰ split ਕਰੋ, ਹਰ chunk ਦੇ ਅੰਦਰ dead code ਨੂੰ shake ਕਰ ਦਿਓ।

Code splitting

ਇੱਕ ਵੱਡੇ bundle ਦੀ ਬਜਾਏ, app ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ split ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਹਰ route ਜਾਂ ਭਾਰੀ feature ਇੱਕ ਵੱਖਰਾ chunk ਹੋਵੇ ਜੋ ਸਿਰਫ਼ ਲੋੜ ਪੈਣ 'ਤੇ fetch ਹੁੰਦਾ ਹੈ:

js

## Code splitting

ਇੱਕ ਵੱਡੇ bundle ਦੀ ਬਜਾਏ, app ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ split ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਹਰ route ਜਾਂ ਭਾਰੀ feature ਇੱਕ ਵੱਖਰਾ chunk ਹੋਵੇ ਜੋ ਸਿਰਫ਼ ਲੋੜ ਪੈਣ 'ਤੇ fetch ਹੁੰਦਾ ਹੈ:

```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 statically ES module `import`/`export` ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹ exports ਸੁੱਟ ਦਿੰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦਾ ਕੁਝ ਵੀ reference ਨਹੀਂ ਕਰਦਾ। ਇਹ ਸਿਰਫ਼ **ESM** (static, analyzable) ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ — CommonJS `require` ਨਾਲ ਨਹੀਂ:

```js
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 ਇਸਨੂੰ ਹਰਾ ਸਕਦੇ ਹਨ।

## Trade-offs

- ਵੱਧ-splitting → ਬਹੁਤ ਸਾਰੇ ਛੋਟੇ requests ਅਤੇ waterfalls; ਸਬੰਧਿਤ code ਨੂੰ group ਕਰੋ।
- Tree shaking ਨਾਜ਼ੁਕ ਹੈ — ਇੱਕ ਗ਼ਲਤ-marked side effect dead code ਨੂੰ ਅੰਦਰ ਰੱਖ ਲੈਂਦਾ ਹੈ।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਇਹ "ਘੱਟ JS ਭੇਜੋ" ਦੇ ਪਿੱਛੇ ਦੋ levers ਹਨ। Interviewers ਚਾਹੁੰਦੇ ਹਨ ਕਿ ਤੁਸੀਂ ਜਾਣੋ ਕਿ code splitting ਤੈਅ ਕਰਦਾ ਹੈ *ਕੀ ਕਦੋਂ load ਹੁੰਦਾ ਹੈ*, tree shaking ਤੈਅ ਕਰਦਾ ਹੈ *ਇਸ ਵਿੱਚ ਬਿਲਕੁਲ ਕੀ ਹੈ*, ਅਤੇ tree shaking static ESM 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ — ਇੱਕ ਵੇਰਵਾ ਜੋ ਉਹਨਾਂ ਲੋਕਾਂ ਨੂੰ ਵੱਖ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੇ ਅਸਲ ਵਿੱਚ ਇੱਕ bundle tune ਕੀਤਾ ਹੈ ਉਹਨਾਂ ਤੋਂ ਜਿਨ੍ਹਾਂ ਨੇ ਸਿਰਫ਼ ਇਸ ਬਾਰੇ ਪੜ੍ਹਿਆ ਹੈ।

Code splitting

Tree shaking

Trade-offs

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ