JavaScript Bundling की व्याख्या
आप कई फाइलों का उपयोग करके React या Angular ऐप्स लिखते हैं। आपके पास components, services और libraries होती हैं। यह संगठन आपकी मदद करता है।
ब्राउज़र को आपके फोल्डर्स से कोई फर्क नहीं पड़ता। यदि आप 200 फाइलें लोड करते हैं, तो ब्राउज़र 200 नेटवर्क रिक्वेस्ट बनाता है। इससे आपका ऐप धीमा हो जाता है।
Bundlers इस समस्या का समाधान करते हैं। एक bundler आपके कोड, imports और modules को लेता है। यह उन्हें एक या कुछ छोटी फाइलों में संयोजित कर देता है। इससे लोडिंग कुशल हो जाती है।
आधुनिक bundlers केवल फाइलों को संयोजित करने से कहीं अधिक करते हैं:
• Minification: यह अतिरिक्त स्पेस और कमेंट्स को हटा देता है। यह फाइलों को छोटा करने के लिए variable नामों को छोटा कर देता है। • Tree shaking: यह उस कोड को हटा देता है जिसका आप कभी उपयोग नहीं करते हैं। यह libraries से अप्रयुक्त (unused) functions को निकाल देता है। • Code splitting: यह कोड को छोटे टुकड़ों (chunks) में तोड़ देता है। ब्राउज़र केवल वही लोड करता है जिसकी उपयोगकर्ता को अभी आवश्यकता है।
छोटी फाइलें तेज़ ऐप्स की ओर ले जाती हैं।
दो मुख्य टूल्स मौजूद हैं: Webpack और Vite।
Webpack आपके पूरे ऐप को सर्व करने से पहले बंडल करता है। यह बड़े legacy प्रोजेक्ट्स के लिए अच्छा काम करता है। यह लचीला है लेकिन बड़े प्रोजेक्ट्स में धीमा महसूस हो सकता है।
Vite एक आधुनिक विकल्प है। डेवलपमेंट के दौरान, यह सीधे फाइलें सर्व करता है। यह केवल उसी फाइल को अपडेट करता है जिसे आप बदलते हैं। इससे अपडेट तुरंत हो जाते हैं। प्रोडक्शन के लिए, Vite तेज़ बंडल बनाने के लिए Rollup का उपयोग करता है।
तुलना:
Webpack:
- Dev speed: धीमी
- Config: जटिल
- Best for: बड़े legacy प्रोजेक्ट्स
Vite:
- Dev speed: तेज़
- Config: सरल
- Best for: नए आधुनिक प्रोजेक्ट्स
नए प्रोजेक्ट्स के लिए Vite का उपयोग करें।
प्रत्येक bundler तीन चरणों का पालन करता है:
- Dependency graph बनाना: यह मैप करता है कि प्रत्येक फाइल दूसरों से कैसे जुड़ती है।
- कोड को transform करना: यह TypeScript या JSX को सादे JavaScript में बदल देता है।
- बंडल आउटपुट करना: यह डिप्लॉयमेंट के लिए सब कुछ एक फोल्डर में संयोजित और minify कर देता है।
इन चरणों के साथ अपने बंडल को हल्का (lean) रखें:
• Lazy loading: components को केवल तभी लोड करें जब उपयोगकर्ता उन तक पहुँचते हैं। • Partial imports: पूरी library को import न करें। केवल उसी विशिष्ट function को import करें जिसकी आपको आवश्यकता है। • Analyze: यह देखने के लिए टूल्स का उपयोग करें कि आपके बंडल में कौन सी चीज़ जगह घेर रही है। • Production builds: हमेशा production builds ही डिप्लॉय करें। Development builds बहुत बड़ी होती हैं।
Bundling ब्राउज़र को कम और छोटी फाइलें देकर आपके ऐप के प्रदर्शन को बेहतर बनाती है।
स्रोत: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p