# Tree-shaking और code splitting — Webpack: Module Bundling और Build Optimization

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

> Dynamic imports और splitChunks vendor extraction के साथ tree-shaking और code splitting से bundle size घटाएँ।

## 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 क्या है?

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

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