Metro Bundler: bu nima, loyihani yig'ish va ishlash prinsipi

Metro Bundler nima

Metro Bundler — Meta tomonidan React Native uchun ishlab chiqilgan va frameworkning barcha loyihalarida standart sifatida ishlatiladigan ochiq manbali JavaScript bunderidir. Metro ning vazifasi loyihaning JavaScript kodini bog'liqliklar bilan birga olib, qurilmada bajariladigan bir yoki bir nechta bundl yig'ishdir. Universal bunderlardan (Webpack, Rollup, Parcel) farqli o'laroq, Metro mobil ishlab chiqish spetsifikasi uchun optimallashtirilgan: minimal yig'ish vaqti, ishlab chiqish vaqtida inkremental yangilanishlar va platforma modullari (Objective-C, Swift, Java, Kotlin native modullari) bilan to'g'ri ishlash. Metro React Native CLI tarkibida yetkaziladi va alohida o'rnatishni talab qilmaydi. React Native 0.72 dan boshlab, Metro 0.80+ versiyasi modullarning parallel transpilyatsiyasini qo'llab-quvvatlaydi, bu ko'p yadroli protsessorlarda yig'ishni 40% gacha tezlashtiradi.

Metro Arxitekturasi: Resolver, Transformer va Bundler

Metro arxitekturasi uchta mustaqil komponentga bo'linadi: Resolver, Transformer va Bundler. Resolver modullarni qidirish va hal qilish uchun javobgardir — import/require ifodalarini o'qiydi, platforma kengaytmalarini hisobga olgan holda tegishli fayllarni topadi va mutlaq yo'llarni qaytaradi. Transformer transpilyatsiyani amalga oshiradi: Babel ni presetlar va pluginlar bilan qo'llaydi, JSX, TypeScript yoki Flow ni toza JavaScript ga aylantiradi. Bundler — yakuniy bosqich: Resolver dan bog'liqlik grafigini va Transformer dan o'zgartirilgan fayllarni qabul qiladi, so'ngra ularni bir yoki bir nechta bundlda (module bundles) seriyalashtiradi. Uch bosqichga bo'linish Metro ga har bir bosqich natijalarini keshlash imkonini beradi: agar faqat bitta fayl o'zgargan bo'lsa, Resolver va Bundler qolgan modullar uchun keshi ishlatishi mumkin, bu ishlab chiqish rejimida yig'ish tezligini 10 baravargacha oshiradi.

Resolver: modul hal qilish va platforma-aware qidirish

Resolver Metro da qisman Node.js module resolution bilan mos keladigan modul hal qilish algoritmini amalga oshiradi. Node.js dan asosiy farq — platforma kengaytmalarini qo'llab-quvvatlash: require('./Component') belgilangan ustuvorlik tartibida Component.native.js, Component.ios.js, Component.android.js fayllarini qidiradi. Resolver shuningdek modullarni muqobil amalga oshirishlarga xaritalash uchun package.json "react-native" maydonini qo'llab-quvvatlaydi — bu platforma kodli kutubxonalar uchun standart mexanizmdir. Agar fayl topilmasa, Resolver to'liq qidiruv steki bilan xato chiqaradi.

Transformer: Babel va transpilyatsiya

Transformer Metro ichida metro-react-native-babel-preset bilan Babel dan foydalanadi. Standart konfiguratsiya o'z ichiga oladi: JSX ni React.createElement ga aylantirish, TypeScript qo'llab-quvvatlash (turlarni olib tashlash), Flow qo'llab-quvvatlash va zamonaviy JavaScript standartlari uchun polifillar (async/await, optional chaining, nullish coalescing). Transformer parallel rejimda ishlaydi: har bir modul mustaqil transpilyatsiya qilinadi, ishchi jarayonlar hovuzidan foydalangan holda (standart bo'yicha soni CPU soniga mos keladi). Metro 0.80 dan boshlab, Granular Transformer Cache qo'llab-quvvatlanadi — alohida fayl darajasida keshi bekor qilish.

Metro da platforma kengaytmalari

Metro ning asosiy xususiyatlaridan biri — platforma fayl kengaytmalarini qo'llab-quvvatlash. React Native loyihasi bitta modulning uchta versiyasini o'z ichiga olishi mumkin: Component.ios.js (iOS), Component.android.js (Android) va Component.native.js (ikkala platforma). require('./Component') importida Resolver avtomatik ravishda maqsadli yig'ish platformasiga qarab to'g'ri versiyani tanlaydi. Bu Platform.OS shartli konstruksiyalarisiz platformaga bog'liq kod yozish imkonini beradi. Ustuvorlik tartibi: nom.platforma.js > nom.native.js > nom.js. .native.js kengaytmasi ikkala platformada ishlaydigan, ammo veb bilan mos kelmaydigan umumiy kod uchun qo'llaniladi. .ios.js va .android.js kengaytmalari o'ziga xos xususiyatlarni amalga oshirish uchun xizmat qiladi — navigatsiya, jestlar, fayl tizimi bilan ishlash. Metro resolver.sourceExts konfiguratsiyasi orqali maxsus kengaytmalarni qo'llab-quvvatlaydi.

// metro.config.js — sourceExts va watchFolders sozlamasi
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 da Hot Reload va Fast Refresh

Fast Refresh — Metro ustida qurilgan React Native issiq qayta yuklash mexanizmi. Dasturchi faylni o'zgartirganda, Metro faqat o'zgartirilgan modulni qayta transpilyatsiya qiladi va WebSocket orqali ilovaga yangilanish yuboradi. Fast Refresh butun ilovani qayta yuklamasdan interfeysni yangilaydi va agar faqat JSX yoki stillar o'zgartirilgan bo'lsa, React komponentlarining holatini saqlaydi. Agar hooklar yoki holat bilan kod o'zgartirilgan bo'lsa, Fast Refresh faqat o'zgartirilgan komponentni qayta o'rnatishni amalga oshiradi. Metro ikkita rejimni qo'llab-quvvatlaydi: modullarni joyida almashtirish uchun Hot Module Replacement (HMR) va native modullar yoki konfiguratsiya o'zgarganda ilovani to'liq qayta yuklash uchun Live Reload. Fast Refresh React Native 0.76 da standart bo'yicha yoqilgan va qo'shimcha konfiguratsiyani talab qilmaydi — faqat npx react-native start ni ishga tushirish kifoya.

Metro konfiguratsiyasi: metro.config.js

metro.config.js — React Native loyihasining ildizida joylashgan Metro konfiguratsiya fayli. Unda konfiguratsiya qilinadi: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) va watcher (watchFolders, healthCheck). Standart Metro konfiguratsiyasi @react-native/metro-config (React Native 0.76+) paketidan meros olinadi. Monorepozitoriyali loyihalar uchun watchFolders qo'shing — bu Metro ga loyiha ildizidan tashqari paketlardagi o'zgarishlarni kuzatish imkonini beradi. sourceExts konfiguratsiyasi uchun maxsus transformatorlar uchun 'svg', 'png', 'gql' qo'shing. Metro async function orqali asinxron konfiguratsiyalarni qo'llab-quvvatlaydi — bu muhit asosida konfiguratsiyani dinamik yaratish uchun foydali.

Konfiguratsiya orqali yig'ishni optimallashtirish

Yig'ishni optimallashtirish Metro to'g'ri keshi konfiguratsiyasidan boshlanadi. maxWorkers ni CPU soni minus 1 ga teng qilib qo'ying. Distributivlar uchun CI da resetCache dan foydalaning. sourceExts ni minimal saqlang — qo'shimcha kengaytmalar modul hal qilishni sekinlashtiradi. Katta loyihalar uchun watchFolders ni faqat kerakli kataloglarga konfiguratsiya qiling. Metro standart Terser dan kichikroq bundl o'lchamini beruvchi Hermes bytecode minification ni qo'llab-quvvatlaydi — minifierPath: 'metro-minify-terser' dan foydalaning.

Hermes bundling: bayt-kodga yig'ish

Metro to'g'ridan-to'g'ri Hermes bytecode ga yig'ish rejimini qo'llab-quvvatlaydi — JavaScript AST bosqichini o'tkazib yuborib. HermesTransformer bilan yig'ishda modullar oddiy JavaScript o'rniga HBC (Hermes ByteCode) ga kompilyatsiya qilinadi. Bu beradi: kichikroq bundl o'lchami (30-40%), tezroq ilova ishga tushishi (20-30%) va kamroq xotira iste'moli. Faollashtirish uchun metro.config.js da hermesCommand ni o'rnating va build.gradle (Android) yoki Podfile (iOS) da Hermes bayrog'ini faollashtiring. Hermes bundllarini yig'ish ikki bosqichda amalga oshiriladi: avval Metro JavaScript bundl yig'adi, so'ngra Hermes CLI uni HBC ga aylantiradi. React Native 0.70 dan boshlab, Hermes Android da standart dvigatel, iOS da aniq faollashtirish talab qilinadi.

Metro vs Webpack: yondashuvlarni solishtirish

Metro va Webpack o'rtasidagi farq turli maqsadlardan kelib chiqadi. Webpack — ulkan plugin va loader ekotizimiga ega universal veb bunderi. Metro — React Native uchun ixtisoslashgan bunder, bu erda ustuvorlik inkremental yig'ish tezligi va native modullar bilan to'g'ri ishlashdir. Webpack aqlli keshi bekor qilish bilan uzoq muddatli modul grafigidan foydalanadi — bu vebda tezkor qayta yig'ishlarni beradi, lekin platforma kengaytmalari bilan muammolar yaratadi. Metro yig'ishlar orasida grafikni keshlanmaydi, har safar uni quradi — bu platforma kengaytmalari va Haste modullarini qayta ishlashni soddalashtiradi. Webpack chunklar bilan dinamik importlarni qo'llab-quvvatlaydi, Metro ham — React.lazy() va Suspense orqali, lekin bitta faol so'rov cheklovi bilan. Metro ekotizimi sezilarli darajada kichikroq: style-loader, css-loader, file-loader uchun o'rinbosar yo'q — bu vazifalar React Native da boshqacha hal qilinadi.

Metro ni qachon tanlash kerak

Metro React Native loyihalari uchun yagona to'g'ri tanlovdir. Webpack qutidan chiqqan holda platforma-aware resolution ni qo'llab-quvvatlamaydi va React Native ni Webpack bilan konfiguratsiya qilish sezilarli kuch talab qiladi (haul bundler, expo web packager). Metro React Native CLI bilan integratsiyalangan, rasmiy Meta jamoasi tomonidan qo'llab-quvvatlanadi va React Native ning har bir relizi bilan yangilanishlarni oladi. React Native Web loyihalari uchun mobil bundllar uchun Metro ni saqlagan holda veb yig'ish uchun Webpack dan foydalanish mumkin.