Vite को सरल बनाना
Webpack या CRA जैसे पुराने टूल्स पहले आपके पूरे प्रोजेक्ट को बंडल करके काम करते हैं। वे हर फाइल को पढ़ते हैं और उन्हें एक बड़ी JavaScript फाइल में मिला देते हैं। यह छोटे प्रोजेक्ट्स के लिए तो ठीक है, लेकिन हज़ारों मॉड्यूल्स वाले बड़े प्रोजेक्ट्स के लिए यह विफल हो जाता है। बड़े बंडल्स को बनाने में सेकंड या मिनट लग जाते हैं। हर बार जब आप कोई फाइल सेव करते हैं, तो टूल बंडल के बड़े हिस्सों को फिर से बनाता है।
Vite अलग तरह से काम करता है। आधुनिक ब्राउज़र्स ES modules को नेटिव रूप से सपोर्ट करते हैं। Vite डेवलपमेंट के दौरान आपके कोड को बंडल नहीं करता है। यह प्रत्येक फाइल को एक अलग मॉड्यूल के रूप में तभी सर्व करता है जब ब्राउज़र इसकी मांग करता है।
एक बुफे (buffet) रेस्टोरेंट के बारे में सोचें। शेफ दरवाजे खुलने से पहले ही हर एक डिश बना देता है। यदि आप एक छोटा सा बदलाव चाहते हैं, तो शेफ को लगभग पूरा बुफे फिर से बनाना पड़ता है। आपको अपने खाने के लिए बहुत लंबा इंतज़ार करना पड़ता है। Webpack इसी तरह काम करता है।
अब एक à la carte रेस्टोरेंट के बारे में सोचें। दरवाजे तुरंत खुल जाते हैं। आप एक डिश ऑर्डर करते हैं। शेफ केवल वही डिश तैयार करता है। यदि आप बाद में डेज़र्ट (dessert) चाहते हैं, तो शेफ केवल डेज़र्ट ही तैयार करता है। आपको पूरा मेनू पकने का इंतज़ार नहीं करना पड़ता। Vite इसी तरह काम करता है।
Vite दो अलग-अलग जरूरतों के लिए दो अलग-अलग रणनीतियों का उपयोग करता है:
Development (vite dev)
- रणनीति: बिना बंडल किए नेटिव ESM मॉड्यूल्स सर्व करता है।
- स्पीड: तुरंत। यह प्रोजेक्ट के साइज पर निर्भर नहीं करता है।
- क्यों: लोकल नेटवर्क रिक्वेस्ट तेज़ होती हैं।
Production (vite build)
- रणनीति: Rolldown का उपयोग करके सब कुछ बंडल करता है।
- स्पीड: प्रोजेक्ट के साइज पर निर्भर करती है।
- क्यों: सैकड़ों अलग-अलग फाइलें वास्तविक उपयोगकर्ताओं के लिए बहुत अधिक HTTP रिक्वेस्ट पैदा करती हैं। बंडलिंग अंतिम साइट को उनके लिए तेज़ बनाती है।
Vite आपको कोडिंग करते समय स्पीड और लॉन्च करते समय परफॉरमेंस देता है।
स्रोत: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62