𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗕𝘂𝗻𝗱𝗹𝗶𝗻𝗴 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱
आप कई फाइलों का उपयोग करके React या Angular ऐप्स लिखते हैं। आप components, services और libraries का उपयोग करते हैं।
ब्राउज़र के लिए बहुत सारी फाइलों को संभालना मुश्किल होता है। 200 फाइलों को लोड करने का मतलब है 200 नेटवर्क रिक्वेस्ट। इससे आपका ऐप धीमा हो जाता है।
Bundlers इस समस्या का समाधान करते हैं। वे आपके कोड और imports को लेते हैं और उन्हें एक या कुछ छोटी फाइलों में मिला देते हैं। इससे लोडिंग कुशल हो जाती है।
आधुनिक bundlers केवल फाइलों को मिलाने से कहीं अधिक करते हैं। वे ये कार्य करते हैं:
- Minification: वे स्पेस और कमेंट्स को हटा देते हैं। वे जगह बचाने के लिए variable नामों को छोटा कर देते हैं।
- Tree shaking: वे उस कोड को हटा देते हैं जिसका आप उपयोग नहीं करते हैं।
- Code splitting: वे कोड को छोटे टुकड़ों (chunks) में विभाजित करते हैं। उपयोगकर्ता केवल वही लोड करते हैं जिसकी उन्हें आवश्यकता होती है।
छोटी फाइलें ऐप्स को तेज़ बनाती हैं।
दो मुख्य टूल्स मौजूद हैं: Webpack और Vite।
Webpack आपके ऐप को सर्व करने से पहले उसे बंडल करता है। यह शक्तिशाली और लचीला है। बड़े प्रोजेक्ट्स में यह धीमा महसूस हो सकता है क्योंकि यह बदलावों के दौरान सब कुछ फिर से बंडल करता है।
Vite एक आधुनिक विकल्प है। यह डेवलपमेंट के दौरान native ES modules का उपयोग करके सीधे फाइलों को सर्व करता है। यह केवल उसी फाइल को अपडेट करता है जिसे आप बदलते हैं। इससे अपडेट तुरंत हो जाते हैं।
तुलना:
Webpack:
- Dev speed: धीमी
- Config: जटिल
- Best for: बड़े legacy प्रोजेक्ट्स
Vite:
- Dev speed: तेज़
- Config: सरल
- Best for: नए आधुनिक प्रोजेक्ट्स
नए प्रोजेक्ट्स के लिए Vite का उपयोग करें।
प्रत्येक bundler तीन चरणों का पालन करता है:
- Dependency graph बनाना: Bundler यह मैप करता है कि फाइलें एक-दूसरे से कैसे जुड़ी हैं।
- कोड को transform करना: यह TypeScript या JSX को plain JavaScript में बदल देता है।
- Bundle को output करना: यह deployment के लिए अंतिम फाइलों को एक फोल्डर में लिखता है।
इन टिप्स के साथ अपने bundle को हल्का रखें:
- Lazy loading: components को केवल तभी लोड करें जब उपयोगकर्ता को उनकी आवश्यकता हो।
- Specific imports: पूरी libraries को import न करें। केवल उन्हीं विशिष्ट functions को import करें जिनका आप उपयोग करते हैं।
- Analyze your bundle: यह देखने के लिए टूल्स का उपयोग करें कि कौन सी फाइलें सबसे अधिक जगह लेती हैं।
- Use production builds: हमेशा development builds के बजाय production builds को ही deploy करें।
Bundlers कम और छोटी फाइलें प्रदान करके आपके ऐप्स को तेज़ बनाते हैं।
स्रोत: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p