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