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

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

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

त्वरित जाँच

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

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