Metro: यह क्या है, मुख्य विशेषताएं और कार्य सिद्धांत

Metro क्या है?

Metro एक ओपन-सोर्स JavaScript बंडलर है जिसे Meta टीम ने React Native के लिए बनाया है। इसने React Native के शुरुआती संस्करणों के Packager को बदल दिया और इस प्लेटफॉर्म के लिए मानक बिल्ड टूल बन गया। Metro वेब डेवलपमेंट के लिए डिज़ाइन नहीं किया गया है: इसकी आर्किटेक्चर पूरी तरह से JSC (JavaScriptCore) या Hermes JavaScript इंजन पर चलने वाले मोबाइल एप्लिकेशन पर केंद्रित है।

निर्माण का इतिहास और स्थिति

Metro 2018 में पुराने React Native Packager के प्रतिस्थापन के रूप में सामने आया। इसके निर्माण का मुख्य कारण एक ऐसे बंडलर की आवश्यकता थी जो बड़े मोबाइल एप्लिकेशन में लाखों मॉड्यूल के साथ कुशलतापूर्वक काम करे। Webpack के विपरीत, Metro CSS, HTML या इमेज को मॉड्यूल के रूप में समर्थन नहीं करता — ये संसाधन अलग React Native टूल द्वारा संभाले जाते हैं। Facebook अपने मुख्य एप्लिकेशन को बनाने के लिए Metro का उपयोग करता है, जिसमें 100 हज़ार से अधिक फ़ाइलें हैं।

Metro को npm के माध्यम से metro पैकेज के रूप में वितरित किया जाता है और React Native CLI के साथ स्वचालित रूप से इंस्टॉल होता है। Metro का संस्करण React Native के संस्करण से जुड़ा होता है, इसलिए बंडलर का अपडेट प्लेटफॉर्म अपडेट के साथ होता है।

Metro बंडलर कैसे काम करता है?

Metro इनपुट के रूप में एप्लिकेशन का एंट्री पॉइंट लेता है, डिपेंडेंसी ग्राफ बनाता है, प्रत्येक मॉड्यूल को ट्रांसफ़ॉर्म करता है और परिणाम को एकल बंडल में सीरियलाइज़ करता है। प्रक्रिया तीन चरणों से गुज़रती है: Resolve (मॉड्यूल रेज़ॉल्यूशन), Transform (ट्रांसफ़ॉर्मेशन) और Serialize (सीरियलाइज़ेशन)।

Metro में बिल्ड प्रक्रिया

// कस्टम ट्रांसफ़ॉर्मेशन के लिए Metro कॉन्फ़िगरेशन का उदाहरण
const metroConfig = {
  transformer: {
    babelTransformerPath: require('metro-babel-transformer'),
    async transform({ src, filename, options }) {
      const result = await babelTransform({ src, filename, options });
      return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        dependencies: [],
      };
    },
  },
  serializer: {
    createModuleIdFactory() {
      let nextId = 0;
      const moduleIds = new Map();
      return ({ path }) => {
        if (!moduleIds.has(path)) {
          moduleIds.set(path, nextId++);
        }
        return moduleIds.get(path);
      };
    },
  },
};

Resolve चरण में, Metro प्रत्येक आयातित मॉड्यूल का स्थान निर्धारित करता है, एलियास और node_modules को ध्यान में रखते हुए। Transform चरण में, प्रत्येक फ़ाइल JSX, TypeScript और अन्य एक्सटेंशन को शुद्ध JavaScript में बदलने के लिए Babel ट्रांसफ़ॉर्मर से गुज़रती है। अंतिम Serialize चरण सभी ट्रांसफ़ॉर्म किए गए मॉड्यूल को एक या अधिक बंडल फ़ाइलों में एकत्र करता है।

Metro की आर्किटेक्चर

Metro मॉड्यूलर आर्किटेक्चर पर बनाया गया है जहाँ बिल्ड का प्रत्येक चरण एक अलग कंपोनेंट के रूप में कार्यान्वित किया जाता है। यह बंडलर कोर को बदले बिना मानक मॉड्यूल को कस्टम मॉड्यूल से बदलने की अनुमति देता है। Metro आर्किटेक्चर में तीन मुख्य पैकेज शामिल हैं: metro, metro-config और metro-resolver।

Metro के मुख्य कंपोनेंट

Metro Server — एक डेव सर्वर जो npx react-native start कमांड से शुरू होता है। यह रियल-टाइम में मॉड्यूल ट्रांसफ़ॉर्मेशन अनुरोधों को संभालता है, Fast Refresh प्रदान करता है। Module Store — एक कैश जो पुनर्निर्माण को गति देने के लिए ट्रांसफ़ॉर्म किए गए मॉड्यूल को मेमोरी में संग्रहीत करता है। Dependency Graph — एक डिपेंडेंसी ग्राफ जो फ़ाइलों में बदलाव होने पर वृद्धिशील रूप से अपडेट होता है।

Watchman — Meta का एक फ़ाइल वॉचर जिसे Metro फ़ाइल सिस्टम में बदलाव का पता लगाने के लिए उपयोग करता है। Watchman के बिना, Metro को प्रत्येक बदलाव पर पूरी फ़ाइल संरचना को फिर से स्कैन करना पड़ता है, जो डेवलपमेंट को काफी धीमा कर देता है। किसी भी आकार के प्रोजेक्ट पर Metro के साथ आरामदायक काम के लिए Watchman की स्थापना अनिवार्य है।

React Native प्रोजेक्ट में Metro की कॉन्फ़िगरेशन

कॉन्फ़िगरेशन Metro के लिए प्रोजेक्ट रूट में metro.config.js फ़ाइल में सेट किया जाता है। एक सामान्य फ़ाइल मॉड्यूल खोज के लिए अतिरिक्त फ़ोल्डर, अनावश्यक फ़ाइलों को बाहर करने के लिए ब्लॉकलिस्ट और कस्टम ट्रांसफ़ॉर्मर परिभाषित करती है। React Native 0.72+ में कॉन्फ़िगरेशन का ऑटो-डिटेक्शन उपयोग किया जाता है, लेकिन मोनोरेपो के लिए कॉन्फ़िगरेशन अनिवार्य है।

React Native के लिए बेसिक Metro कॉन्फ़िगरेशन

// metro.config.js
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
    nodeModulesPaths: ['node_modules'],
    blockList: [/\.test\.js$/, /__tests__\/.*/],
    extraNodeModules: {
      'shared-components': path.resolve(__dirname, '../shared/src'),
    },
  },
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: { reserved: ['React', 'Component'] },
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

blockList बंडल आकार कम करने के लिए टेस्ट फ़ाइलों को बिल्ड से बाहर करता है। nodeModulesPaths पैकेज खोज के लिए अतिरिक्त पथ निर्दिष्ट करता है — मोनोरेपो के लिए महत्वपूर्ण। extraNodeModules मोनोरेपो में विभिन्न प्रोजेक्ट में उपयोग किए जाने वाले साझा पैकेज के लिए एलियास बनाता है।

Metro बिल्ड का ऑप्टिमाइज़ेशन

Metro बंडल आकार और बिल्ड गति को अनुकूलित करने के लिए कई तंत्र प्रदान करता है। Inline Requires — सबसे प्रभावी तकनीक, जो शीर्ष-स्तरीय आयात को फ़ंक्शन के अंदर स्थानीय रिक्वायर कॉल में बदल देती है। RAM bundles मॉड्यूल को वृद्धिशील रूप से लोड करने की अनुमति देते हैं। Hermes JavaScript को बाइटकोड में कंपाइल करता है, जिससे एप्लिकेशन का आकार 20–30% कम हो जाता है।

Inline Requires और Hermes को सक्षम करना

// metro.config.js — प्रोडक्शन ऑप्टिमाइज़ेशन
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// Hermes सक्षम करने के लिए — build.gradle (Android) में:
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// iOS के लिए — Podfile में: :hermes_enabled => true

बंडल आकार के निदान के लिए, Metro सांख्यिकी आउटपुट के साथ --bundle-output फ़्लैग प्रदान करता है। बंडल संरचना का विश्लेषण करने और बड़े मॉड्यूल खोजने के लिए bundle-visualizer का उपयोग करें जिन्हें आलसी लोड किया जा सकता है। नियमित बंडल आकार जांच React Native प्रोजेक्ट के CI/CD पाइपलाइन का हिस्सा होनी चाहिए।

डेल्टा बंडल और वृद्धिशील बिल्ड

Metro डेल्टा बंडल का समर्थन करता है — एक तंत्र जहाँ पहले पूर्ण बिल्ड के बाद, सर्वर पुराने और नए बंडल संस्करणों के बीच केवल परिवर्तन (डेल्टा) भेजता है। यह बाद के बिल्ड को मौलिक रूप से गति देता है: अपडेट का समय सेकंड से घटकर दसियों मिलीसेकंड रह जाता है। डेल्टा बंडल डेवलपमेंट चरण में विशेष रूप से प्रभावी होते हैं, जब डेवलपर बार-बार बदलाव सहेजता है और एप्लिकेशन को रीलोड करता है।

React Native में डेल्टा बंडल सक्षम करने के लिए, npx react-native bundle कमांड में --delta फ़्लैग का उपयोग किया जाता है। क्लाइंट पक्ष पर, डेल्टा बंडल React Native 0.64 से समर्थित हैं। प्रोडक्शन बिल्ड में डेल्टा बंडल का उपयोग नहीं किया जाता — इसके बजाय अधिकतम स्टार्टअप प्रदर्शन के लिए Hermes बाइटकोड के साथ पूर्ण बंडल का उपयोग किया जाता है। यह इसलिए संभव है क्योंकि डेवलपमेंट गति में लाभ पहले पूर्ण बिल्ड की लागत की भरपाई करता है।

Hermes और Metro: सहयोग

Hermes एक JavaScript इंजन है जिसे Meta ने विशेष रूप से React Native के लिए विकसित किया है। Metro बिल्ड चरण में Hermes बाइटकोड उत्पन्न करता है, जो एप्लिकेशन को डिवाइस पर महंगी JavaScript कंपाइलेशन के बिना शुरू करने की अनुमति देता है। Hermes को सक्षम करने के लिए, metro.config.js में enableHermes: true जोड़ें और build.gradle या Podfile कॉन्फ़िगर करें। Hermes एप्लिकेशन स्टार्टअप समय को 30–50% कम करता है और JavaScriptCore की तुलना में APK आकार को 20–30% कम करता है।

Hermes का उपयोग करते समय, सीमाओं को याद रखना महत्वपूर्ण है: इंजन Proxy, Reflect और कुछ ES6 सुविधाओं का समर्थन नहीं करता है। अधिकांश React Native एप्लिकेशन इन सुविधाओं का सीधे उपयोग नहीं करते, लेकिन कुछ लाइब्रेरी संघर्ष कर सकती हैं। Hermes सक्षम करने से पहले, आधिकारिक संगतता जाँच सूची के माध्यम से सभी प्रोजेक्ट निर्भरताओं की संगतता जाँचें। Hermes सक्रिय होने पर Metro स्वचालित रूप से बाइटकोड जनरेशन मोड में स्विच हो जाता है।

Metro प्रदर्शन की निगरानी

Metro बिल्ड दक्षता को ट्रैक करने के लिए, Flipper — React Native डिबगिंग टूल के माध्यम से उपलब्ध अंतर्निहित मीट्रिक का उपयोग करें। Metro इवेंट प्रकाशित करता है: bundle_request, transform, resolve प्रत्येक चरण के निष्पादन समय के साथ। इस डेटा का विश्लेषण बाधाओं की पहचान करने में मदद करता है: यदि ट्रांसफ़ॉर्म चरण 70% से अधिक समय लेता है, तो समस्या Babel ट्रांसफ़ॉर्मर में है। विस्तृत निदान के लिए --verbose फ़्लैग के माध्यम से Metro लॉगिंग सक्षम करें।