# Tree-shaking और code splitting — Webpack

Source: https://www.geekswithgeeks.com/hi/webpack/webpack-09

> Unused code को remove करें और efficiency के लिए bundles को split करें।

## Dead code को eliminate करना

**Tree-shaking** production mode में unused exports को remove करता है। यह identify करने के लिए ES6 module static structure पर rely करता है कि क्या imported है। **Code splitting** bundles को chunks में divide करता है जो on-demand load होते हैं।

## Code splitting example

Separate chunks बनाने के लिए dynamic imports use करें।

```javascript
// Load module only when needed
const handleClick = async () => {
  const { heavyModule } = await import('./heavy.js');
  heavyModule();
};

button.addEventListener('click', handleClick);
```

Output:

```
Creates: main.js, heavy.HASH.js (loaded on click)
```

## Split chunks को optimize करें

splitChunks को configure करके vendor dependencies को separate bundles में extract करें। यह page updates के across vendor code को browser cache करने देता है।

त्वरित जाँच

**Quiz:** Tree-shaking क्या है?

- [x] Bundle से unused code को remove करना।
- [ ] Bugs find करने के लिए dependency tree को shake करना।
- [ ] Files में imports को reorder करना।

*Answer:* Bundle से unused code को remove करना।. Tree-shaking production builds में unused exports को eliminate करके bundle size को reduce करता है।