JavaScript Bundling स्पष्टीकरण
तुम्ही अनेक फाइल्स वापरून React किंवा Angular ॲप्स लिहिता. तुम्ही components, services आणि libraries वापरता.
अनेक फाइल्स हाताळताना ब्राउझर्सना त्रास होतो. २०० फाइल्स लोड करणे म्हणजे २०० नेटवर्क रिक्वेस्ट्स होणे. यामुळे तुमचे ॲप स्लो होते.
Bundlers ही समस्या सोडवतात. ते तुमचा कोड आणि imports घेतात आणि त्यांना एकत्रित करून एक किंवा काही लहान फाइल्समध्ये रूपांतरित करतात. यामुळे लोडिंग कार्यक्षम होते.
आधुनिक bundlers फक्त फाइल्स एकत्र करण्याचे काम करत नाहीत. ते खालील कार्ये देखील करतात:
- Minification: ते स्पेस आणि कमेंट्स काढून टाकतात. जागा वाचवण्यासाठी ते variable नावांना लहान करतात.
- Tree shaking: तुम्ही न वापरलेला कोड ते काढून टाकतात.
- Code splitting: ते कोडचे लहान तुकड्यांमध्ये (chunks) विभाजन करतात. वापरकर्ते फक्त त्यांना आवश्यक असलेलाच भाग लोड करतात.
लहान फाइल्समुळे ॲप्स वेगाने चालतात.
यासाठी दोन मुख्य टूल्स उपलब्ध आहेत: Webpack आणि Vite.
Webpack तुमचे संपूर्ण ॲप सर्व्ह करण्यापूर्वी त्याचे bundling करते. ते शक्तिशाली आणि लवचिक आहे. मोठ्या प्रोजेक्ट्समध्ये ते संथ वाटू शकते कारण बदल केल्यावर ते सर्व काही पुन्हा bundle करते.
Vite हा एक आधुनिक पर्याय आहे. ते development दरम्यान native ES modules वापरून फाइल्स थेट सर्व्ह करते. तुम्ही बदललेली फक्त तीच फाईल ते अपडेट करते. यामुळे अपडेट्स त्वरित होतात.
तुलना:
Webpack:
- Dev speed: संथ
- Config: क्लिष्ट
- Best for: मोठे legacy प्रोजेक्ट्स
Vite:
- Dev speed: वेगवान
- Config: सोपे
- Best for: नवीन आधुनिक प्रोजेक्ट्स
नवीन प्रोजेक्ट्ससाठी Vite वापरा.
प्रत्येक bundler तीन पायऱ्यांचे अनुसरण करते:
- Build a dependency graph: Bundler फाइल्स एकमेकांशी कशा जोडल्या आहेत याचा नकाशा (map) तयार करते.
- Transform code: ते TypeScript किंवा JSX चे साध्या JavaScript मध्ये रूपांतर करते.
- Output the bundle: ते डिप्लॉयमेंटसाठी अंतिम फाइल्स एका फोल्डरमध्ये लिहिते.
या टिप्स वापरून तुमचे bundle हलके (lean) ठेवा:
- Lazy loading: वापरकर्त्याला गरज असेल तेव्हाच components लोड करा.
- Specific imports: संपूर्ण libraries इम्पोर्ट करू नका. तुम्ही वापरत असलेले विशिष्ट functionsच इम्पोर्ट करा.
- Analyze your bundle: कोणत्या फाइल्स सर्वात जास्त जागा व्यापतात हे पाहण्यासाठी टूल्स वापरा.
- Use production builds: नेहमी development builds ऐवजी production builds डिप्लॉय करा.
Bundlers कमी आणि लहान फाइल्स देऊन तुमचे ॲप्स वेगवान बनवतात.
Source: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p