कोड विभाजन और बंडलिंग

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

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)।

त्वरित जाँच

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

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