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 ব্যবহার করতে পারেন।