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 লগিং সক্ষম করুন।