Metro Bundler: यह क्या है, प्रोजेक्ट बंडलिंग और कार्य सिद्धांत

Metro Bundler क्या है

Metro Bundler एक ओपन-सोर्स JavaScript बंडलर है जिसे Meta ने React Native के लिए विकसित किया है और सभी फ्रेमवर्क प्रोजेक्ट्स में डिफ़ॉल्ट रूप से उपयोग किया जाता है। Metro का काम प्रोजेक्ट के JavaScript कोड को निर्भरताओं सहित लेकर एक या अधिक बंडलों में इकट्ठा करना है जो डिवाइस पर चलते हैं। सामान्य बंडलरों (Webpack, Rollup, Parcel) के विपरीत, Metro मोबाइल डेवलपमेंट की विशिष्टताओं के लिए अनुकूलित है: न्यूनतम बिल्ड समय, डेवलपमेंट के दौरान वृद्धिशील अपडेट और प्लेटफ़ॉर्म मॉड्यूल (Objective-C, Swift, Java, Kotlin नेटिव मॉड्यूल) का सही संचालन। Metro React Native CLI के भाग के रूप में आता है और इसे अलग से इंस्टॉल करने की आवश्यकता नहीं है। React Native 0.72 से शुरू होकर, Metro संस्करण 0.80+ मॉड्यूल की समानांतर ट्रांसपिलेशन का समर्थन करता है, जो मल्टी-कोर प्रोसेसर पर बिल्ड को 40% तक तेज़ करता है।

Metro की आर्किटेक्चर: Resolver, Transformer और Bundler

Metro की आर्किटेक्चर तीन स्वतंत्र घटकों में विभाजित है: Resolver, Transformer और Bundler। Resolver मॉड्यूल खोजने और हल करने के लिए जिम्मेदार है — यह import/require एक्सप्रेशन पढ़ता है, प्लेटफ़ॉर्म एक्सटेंशन को ध्यान में रखते हुए संबंधित फ़ाइलें ढूंढता है और पूर्ण पथ लौटाता है। Transformer ट्रांसपिलेशन करता है: Babel को presets और plugins के साथ लागू करता है, JSX, TypeScript या Flow को शुद्ध JavaScript में रूपांतरित करता है। Bundler अंतिम चरण है: यह Resolver से निर्भरता ग्राफ़ और Transformer से रूपांतरित फ़ाइलें लेता है, फिर उन्हें एक या अधिक बंडलों (मॉड्यूल बंडल) में क्रमबद्ध करता है। तीन चरणों में विभाजन Metro को प्रत्येक चरण के परिणामों को कैश करने की अनुमति देता है: यदि केवल एक फ़ाइल बदली है, तो Resolver और Bundler शेष मॉड्यूल के लिए कैश का उपयोग कर सकते हैं, जो डेवलपमेंट मोड में बिल्ड की गति में 10 गुना तक की वृद्धि प्रदान करता है।

Resolver: मॉड्यूल रिज़ॉल्यूशन और प्लेटफ़ॉर्म-जागरूक खोज

Metro में Resolver एक मॉड्यूल रिज़ॉल्यूशन एल्गोरिदम लागू करता है जो आंशिक रूप से Node.js मॉड्यूल रिज़ॉल्यूशन के साथ संगत है। Node.js से मुख्य अंतर प्लेटफ़ॉर्म एक्सटेंशन का समर्थन है: require(‘./Component’) निर्दिष्ट प्राथमिकता क्रम में Component.native.js, Component.ios.js, Component.android.js खोजता है। Resolver मॉड्यूल को वैकल्पिक कार्यान्वयन में मैप करने के लिए package.json फ़ील्ड “react-native” का भी समर्थन करता है — यह प्लेटफ़ॉर्म-विशिष्ट कोड वाली लाइब्रेरी के लिए मानक तंत्र है। यदि फ़ाइल नहीं मिलती है, तो Resolver पूर्ण खोज स्टैक के साथ एक त्रुटि फेंकता है।

Transformer: Babel और ट्रांसपिलेशन

Metro के अंदर Transformer metro-react-native-babel-preset प्रीसेट के साथ Babel का उपयोग करता है। मानक कॉन्फ़िगरेशन में शामिल है: JSX को React.createElement में रूपांतरित करना, TypeScript समर्थन (टाइप हटाना), Flow समर्थन और आधुनिक JavaScript मानकों (async/await, optional chaining, nullish coalescing) के लिए पॉलीफिल। Transformer समानांतर मोड में काम करता है: प्रत्येक मॉड्यूल स्वतंत्र रूप से ट्रांसपाइल किया जाता है, वर्कर प्रक्रियाओं के पूल का उपयोग करके (डिफ़ॉल्ट रूप से संख्या CPU संख्या के अनुरूप होती है)। Metro 0.80 से, Granular Transformer Cache समर्थित है — व्यक्तिगत फ़ाइल स्तर पर कैश अमान्यकरण।

Metro में प्लेटफ़ॉर्म-विशिष्ट एक्सटेंशन

Metro की प्रमुख विशेषताओं में से एक प्लेटफ़ॉर्म फ़ाइल एक्सटेंशन का समर्थन है। एक React Native प्रोजेक्ट में एक ही मॉड्यूल के तीन संस्करण हो सकते हैं: Component.ios.js (iOS), Component.android.js (Android) और Component.native.js (दोनों प्लेटफ़ॉर्म)। require(‘./Component’) आयात करते समय, Resolver लक्ष्य बिल्ड प्लेटफ़ॉर्म के आधार पर स्वचालित रूप से सही संस्करण चुनता है। यह सशर्त Platform.OS निर्माणों के बिना प्लेटफ़ॉर्म-निर्भर कोड लिखने की अनुमति देता है। प्राथमिकता क्रम: name.platform.js > name.native.js > name.js। .native.js एक्सटेंशन का उपयोग सामान्य कोड के लिए किया जाता है जो दोनों प्लेटफ़ॉर्म पर काम करता है लेकिन वेब के साथ असंगत है। .ios.js और .android.js एक्सटेंशन विशिष्ट सुविधाओं को लागू करने के लिए काम करते हैं — नेविगेशन, जेस्चर, फ़ाइल सिस्टम संचालन। Metro resolver.sourceExts कॉन्फ़िगरेशन के माध्यम से कस्टम एक्सटेंशन का समर्थन करता है।

// metro.config.js — sourceExts और watchFolders सेटअप
const config = {
  resolver: {
    sourceExts: ['jsx', 'js', 'tsx', 'ts', 'json'],
    platformExtensions: ['ios', 'android', 'native'],
  },
  transformer: {
    babelTransformerPath: require('metro-react-native-babel-transformer'),
  },
  watchFolders: [path.resolve('../shared')],
};

Metro में हॉट रीलोड और Fast Refresh

Fast Refresh Metro के ऊपर बनाया गया React Native के लिए एक हॉट रीलोड तंत्र है। जब डेवलपर फ़ाइल बदलता है, Metro केवल बदले गए मॉड्यूल को फिर से ट्रांसपाइल करता है और WebSocket के माध्यम से ऐप को अपडेट भेजता है। Fast Refresh पूरे एप्लिकेशन को रीलोड किए बिना UI को अपडेट करता है और यदि केवल JSX या स्टाइल बदले हैं तो React कंपोनेंट की स्थिति को संरक्षित करता है। यदि हुक्स या स्थिति वाला कोड बदला जाता है, तो Fast Refresh केवल बदले गए कंपोनेंट को पुनः माउंट करता है। Metro दो मोड का समर्थन करता है: Hot Module Replacement (HMR) चलते-फिरते मॉड्यूल बदलने के लिए और Live Reload नेटिव मॉड्यूल या कॉन्फ़िगरेशन बदलने पर पूर्ण एप्लिकेशन रीलोड के लिए। Fast Refresh React Native 0.76 में डिफ़ॉल्ट रूप से सक्षम है और अतिरिक्त कॉन्फ़िगरेशन की आवश्यकता नहीं है — बस npx react-native start चलाएँ।

Metro कॉन्फ़िगरेशन: metro.config.js

metro.config.js फ़ाइल React Native प्रोजेक्ट की जड़ में स्थित Metro कॉन्फ़िगरेशन फ़ाइल है। इसमें कॉन्फ़िगर किए जाते हैं: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) और watcher (watchFolders, healthCheck)। मानक Metro कॉन्फ़िगरेशन @react-native/metro-config पैकेज (React Native 0.76+) से इनहेरिट करता है। मोनोरेपो प्रोजेक्ट के लिए, watchFolders जोड़ें — यह Metro को प्रोजेक्ट रूट के बाहर के पैकेजों में बदलावों को ट्रैक करने की अनुमति देता है। sourceExts कॉन्फ़िगर करने के लिए, कस्टम ट्रांसफॉर्मर के लिए ‘svg’, ‘png’, ‘gql’ जोड़ें। Metro async function के माध्यम से एसिंक्रोनस कॉन्फ़िगरेशन का समर्थन करता है — यह पर्यावरण के आधार पर डायनामिक कॉन्फ़िग जनरेशन के लिए उपयोगी है।

कॉन्फ़िगरेशन के माध्यम से बिल्ड ऑप्टिमाइज़ेशन

Metro बिल्ड का ऑप्टिमाइज़ेशन उचित कैश कॉन्फ़िगरेशन से शुरू होता है। maxWorkers को CPU की संख्या माइनस 1 पर सेट करें। वितरण के लिए, CI पर resetCache का उपयोग करें। sourceExts को कम करें — अतिरिक्त एक्सटेंशन मॉड्यूल रिज़ॉल्यूशन को धीमा करते हैं। बड़े प्रोजेक्ट के लिए, watchFolders को केवल आवश्यक निर्देशिकाओं के लिए कॉन्फ़िगर करें। Metro Hermes बाइटकोड मिनिफिकेशन का समर्थन करता है, जो मानक Terser से छोटा बंडल आकार देता है — minifierPath: ‘metro-minify-terser’ का उपयोग करें।

Hermes बंडलिंग: बाइटकोड में बिल्ड

Metro सीधे Hermes बाइटकोड में बिल्ड मोड का समर्थन करता है — JavaScript AST चरण को छोड़ते हुए। HermesTransformer के साथ बिल्ड करते समय, मॉड्यूल सादे JavaScript के बजाय HBC (Hermes ByteCode) में संकलित होते हैं। यह प्रदान करता है: छोटा बंडल आकार (30-40%), तेज़ एप्लिकेशन स्टार्टअप (20-30%) और कम मेमोरी खपत। सक्षम करने के लिए, metro.config.js में hermesCommand सेट करें और build.gradle (Android) या Podfile (iOS) में Hermes फ़्लैग सक्रिय करें। Hermes बंडल बिल्ड दो चरणों में किया जाता है: पहले Metro JavaScript बंडल बनाता है, फिर Hermes CLI इसे HBC में बदलता है। React Native 0.70 से, Hermes Android पर डिफ़ॉल्ट इंजन है, iOS पर इसे स्पष्ट रूप से सक्षम करने की आवश्यकता है।

Metro बनाम Webpack: दृष्टिकोणों की तुलना

Metro और Webpack के बीच अंतर अलग-अलग लक्ष्यों के कारण है। Webpack प्लगइन्स और लोडर्स के विशाल पारिस्थितिकी तंत्र के साथ वेब के लिए एक सार्वभौमिक बंडलर है। Metro React Native के लिए एक विशेष बंडलर है जहाँ प्राथमिकता वृद्धिशील बिल्ड गति और नेटिव मॉड्यूल के साथ सही काम करना है। Webpack एक दीर्घकालिक मॉड्यूल ग्राफ़ का उपयोग करता है जिसमें स्मार्ट कैश अमान्यकरण होता है — यह वेब पर तेज़ पुनर्निर्माण प्रदान करता है लेकिन प्लेटफ़ॉर्म एक्सटेंशन के साथ समस्याएँ पैदा करता है। Metro बिल्ड के बीच ग्राफ़ को कैश नहीं करता बल्कि इसे हर बार बनाता है — यह प्लेटफ़ॉर्म एक्सटेंशन और Haste मॉड्यूल के संचालन को सरल बनाता है। Webpack चंक्स के साथ डायनामिक इम्पोर्ट का समर्थन करता है, Metro भी करता है — React.lazy() और Suspense के माध्यम से, लेकिन एक सक्रिय अनुरोध की सीमा के साथ। Metro का पारिस्थितिकी तंत्र काफी छोटा है: style-loader, css-loader, file-loader का कोई विकल्प नहीं है — ये कार्य React Native में अलग तरीके से हल किए जाते हैं।

Metro को कब चुनें

Metro React Native प्रोजेक्ट के लिए एकमात्र सही विकल्प है। Webpack आउट ऑफ द बॉक्स प्लेटफ़ॉर्म-जागरूक रिज़ॉल्यूशन का समर्थन नहीं करता है, और Webpack के साथ React Native सेट अप करने के लिए महत्वपूर्ण प्रयास की आवश्यकता होती है (haul bundler, expo web packager)। Metro React Native CLI में एकीकृत है, आधिकारिक Meta टीम द्वारा समर्थित है और React Native के हर रिलीज़ के साथ अपडेट प्राप्त करता है। React Native Web प्रोजेक्ट के लिए, आप मोबाइल बंडल के लिए Metro रखते हुए वेब बिल्ड के लिए Webpack का उपयोग कर सकते हैं।