# कोड विभाजन और बंडलिंग — वेब प्रदर्शन अनुकूलन

Source: https://www.geekswithgeeks.com/hi/web-performance/web-perf-09

> कोड को छोटे टुकड़ों में विभाजित करें जो प्रारंभिक बंडल आकार को कम करने के लिए आवश्यकतानुसार लोड होते हैं।

## कोड विभाजन के लिए गतिशील आयात

Use `import()` for lazy loading: `const modal = await import('./modal.js')`. Webpack and other bundlers automatically create separate chunks. Load heavy features only when needed, not in initial bundle.

## रूट-आधारित कोड विभाजन

In single-page apps (React, Vue), split code per route. Load only JavaScript for current route. Frameworks like Next.js and Nuxt do this automatically. Reduces initial bundle by 50-70%.

## बंडल विश्लेषण और निगरानी

Use tools like webpack-bundle-analyzer, Bundle Buddy, or Bundlephobia to visualize bundle composition. Set budget alerts: fail build if bundle exceeds size limit (e.g., 250KB gzipped).

## बंडल आकार सर्वोत्तम प्रथाएं

Audit dependencies regularly. Prefer smaller alternatives. Use ESM-only packages. Monitor bundle growth in CI. Set strict size budgets (JavaScript <250KB, vendor <100KB gzipped).

त्वरित जाँच

**Quiz:** रूट-आधारित कोड विभाजन क्या प्राप्त कर सकता है?

- [ ] प्रारंभिक बंडल को 50-70% कम करता है
- [ ] कैशिंग की आवश्यकता को समाप्त करता है
- [ ] संपत्ति को स्वचालित रूप से संपीड़ित करता है