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

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

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

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

Lazy loading के लिए `import()` इस्तेमाल करें: `const modal = await import('./modal.js')`। Webpack जैसे bundlers अलग chunks अपने-आप बना देते हैं। भारी features तभी load करें जब ज़रूरत हो, initial bundle में नहीं।

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

Single-page apps (React, Vue) में हर route के हिसाब से code split करें। सिर्फ़ मौजूदा route का JavaScript load करें। Next.js और Nuxt जैसे frameworks यह अपने-आप करते हैं। Initial bundle 50-70% तक घटता है।

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

Bundle की बनावट देखने के लिए webpack-bundle-analyzer, Bundle Buddy या Bundlephobia इस्तेमाल करें। Budget alerts लगाएँ: bundle size limit (जैसे 250KB gzipped) पार करे तो build fail हो।

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

Dependencies का नियमित audit करें। छोटे alternatives चुनें। ESM-only packages इस्तेमाल करें। CI में bundle growth monitor करें। सख़्त size budgets रखें (JavaScript <250KB, vendor <100KB gzipped)।

त्वरित जाँच

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

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

*Answer:* प्रारंभिक बंडल को 50-70% कम करता है. केवल मौजूदा route का code load करने से initial bundle काफी छोटा हो जाता है।