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 — میٹا کا فائل مانیٹر ہے جسے Metro فائل سسٹم میں تبدیلیاں دریافت کرنے کے لیے استعمال کرتا ہے۔ Watchman کے بغیر، Metro کو ہر تبدیلی پر پورے فائل ڈھانچے کو دوبارہ اسکین کرنا پڑتا ہے، جس سے ڈیویلپمنٹ نمایاں طور پر سست ہو جاتی ہے۔ کسی بھی سائز کے پروجیکٹ پر Metro کے ساتھ آرام دہ کام کے لیے Watchman کا انسٹالیشن لازمی ہے۔

React Native پروجیکٹ میں 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 — سب سے مؤثر تکنیک جو اوپری سطح کے امپورٹس کو فنکشنز کے اندر مقامی require کالز میں تبدیل کرتی ہے۔ 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 JavaScriptCore کے مقابلے میں ایپلیکیشن کے شروع ہونے کا وقت 30–50% اور 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 لاگنگ کو فعال کریں۔