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