Metro: bu nima, asosiy imkoniyatlari va ishlash prinsipi

Metro nima?

Metro — Meta jamoasi tomonidan React Native uchun yaratilgan ochiq kodli JavaScript bundleridir. U React Native-ning dastlabki versiyalaridagi Packager-ni almashtirdi va ushbu platforma uchun standart kompilatsiya vositasiga aylandi. Metro veb-ishlab chiqish uchun mo'ljallanmagan: uning arxitekturasi faqat JSC (JavaScriptCore) yoki Hermes JavaScript dvigatellari ostida ishlaydigan mobil ilovalarga qaratilgan.

Yaratilish tarixi va joylashuvi

Metro 2018-yilda eski React Native Packager-ning o'rniga paydo bo'ldi. Yaratilishining asosiy sababi katta mobil ilovalarda millionlab modullar bilan samarali ishlay oladigan bundler-ga ehtiyoj edi. Webpack-dan farqli o'laroq, Metro CSS, HTML yoki rasmlarni modul sifatida qo'llab-quvvatlamaydi — bu resurslar React Native-ning alohida vositalari bilan qayta ishlanadi. Facebook 100 mingdan ortiq faylga ega bo'lgan asosiy ilovasini yaratish uchun Metro-dan foydalanadi.

Metro npm orqali metro paketi sifatida tarqatiladi va React Native CLI bilan birga avtomatik o'rnatiladi. Metro versiyasi React Native versiyasiga bog'langan, shuning uchun bundler-ni yangilash platformani yangilash bilan birga amalga oshiriladi.

Metro bundleri qanday ishlaydi?

Metro kirishda ilovaning kirish nuqtasini qabul qiladi, bog'liqlik grafigini quradi, har bir modulni transformatsiya qiladi va natijani yagona bundle-ga serializatsiya qiladi. Jarayon uch fazadan o'tadi: Resolve (modullarni hal qilish), Transform (transformatsiya) va Serialize (serializatsiya).

Metro-da kompilatsiya jarayoni

// Maxsus transformatsiya uchun Metro konfiguratsiyasi namunasi
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 bosqichida Metro har bir import qilinadigan modulning joylashishini, aliaslar va node_modules-ni hisobga olgan holda aniqlaydi. Transform bosqichida har bir fayl JSX, TypeScript va boshqa kengaytmalarni toza JavaScript-ga aylantirish uchun Babel transformatoridan o'tadi. Yakuniy Serialize bosqichi barcha transformatsiya qilingan modullarni bir yoki bir nechta bundle fayllariga yig'adi.

Metro arxitekturasi

Metro modulli arxitektura asosida qurilgan bo'lib, unda kompilatsiyaning har bir bosqichi alohida komponent sifatida amalga oshirilgan. Bu bundler yadrosini o'zgartirmasdan standart modullarni maxsus modullar bilan almashtirish imkonini beradi. Metro arxitekturasi uchta asosiy paketni o'z ichiga oladi: metro, metro-config va metro-resolver.

Metro-ning asosiy komponentlari

Metro Server — npx react-native start buyrug'i bilan ishga tushiriladigan ishlab chiqish serveri. U real vaqtda modul transformatsiya so'rovlariga xizmat ko'rsatadi va Fast Refresh-ni ta'minlaydi. Module Store — takroriy kompilatsiyalarni tezlashtirish uchun transformatsiya qilingan modullarni xotirada saqlaydigan kesh. Dependency Graph — fayllar o'zgartirilganda qo'shimcha ravishda yangilanadigan bog'liqlik grafigi.

Watchman — Metro fayl tizimidagi o'zgarishlarni aniqlash uchun foydalanadigan Meta-ning fayl kuzatuvchisi. Watchman bo'lmasa, Metro har bir o'zgarishda butun fayl strukturasini qayta skanerlashi kerak, bu esa ishlab chiqishni sezilarli darajada sekinlashtiradi. Watchman-ni o'rnatish har qanday o'lchamdagi loyihalarda Metro bilan qulay ishlash uchun majburiydir.

React Native loyihasida Metro konfiguratsiyasi

Konfiguratsiya Metro loyihaning ildiz qismida metro.config.js faylida belgilanadi. Oddiy fayl modullarni qidirish uchun qo'shimcha papkalar, keraksiz fayllarni istisno qilish uchun bloklar va maxsus transformatorlarni belgilaydi. React Native 0.72+ da konfiguratsiyani avtomatik aniqlash ishlatiladi, ammo monorepozitoriyalar uchun konfiguratsiya majburiydir.

React Native uchun asosiy Metro konfiguratsiyasi

// 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 test fayllarini kompilatsiyadan istisno qiladi, bundle hajmini kamaytiradi. nodeModulesPaths paketlarni qidirish uchun qo'shimcha yo'llarni ko'rsatadi — monorepozitoriyalar uchun muhim. extraNodeModules monorepozitoriyaning turli loyihalarida ishlatiladigan umumiy paketlar uchun aliaslar yaratadi.

Metro kompilatsiyasini optimallashtirish

Metro bundle hajmi va kompilatsiya tezligini optimallashtirish uchun bir necha mexanizmlarni taqdim etadi. Inline Requires — eng samarali texnika, yuqori darajadagi importlarni funksiyalar ichidagi lokal require-ga aylantiradi. RAM bundles modullarni qo'shimcha yuklash imkonini beradi. Hermes JavaScript-ni bayt-kodga kompilyatsiya qiladi, ilova hajmini 20–30% kamaytiradi.

Inline Requires va Hermes-ni yoqish

// metro.config.js — ishlab chiqarish uchun optimallashtirish
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-ni yoqish uchun — build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// iOS uchun — Podfile: :hermes_enabled => true

Bundle hajmini diagnostika qilish uchun Metro statistika chiqishi bilan --bundle-output bayrog'ini taqdim etadi. Bundle tarkibini tahlil qilish va dangasa yuklanishi mumkin bo'lgan katta modullarni topish uchun bundle-visualizer dan foydalaning. Bundle hajmini muntazam tekshirish React Native loyihasining CI/CD quvurining bir qismi bo'lishi kerak.

Delta Bundles va qo'shimcha kompilatsiya

Metro delta-bundle-larni qo'llab-quvvatlaydi — birinchi to'liq kompilatsiyadan so'ng server eski va yangi bundle versiyalari o'rtasida faqat o'zgarishlarni (delta) yuboradigan mexanizm. Bu keyingi kompilatsiyalarni keskin tezlashtiradi: yangilanish vaqti soniyalardan o'nlab millisekundlargacha qisqaradi. Delta-bundle-lar, ayniqsa, ishlab chiquvchi tez-tez o'zgarishlarni saqlab, ilovani qayta yuklaganda, ishlab chiqish bosqichida samarali bo'ladi.

React Native-da delta-bundle-larni yoqish uchun npx react-native bundle buyrug'ida --delta bayrog'i ishlatiladi. Mijoz tomonida delta-bundle-lar React Native 0.64 dan boshlab qo'llab-quvvatlanadi. Ishlab chiqarish kompilatsiyalarida delta-bundle-lar qo'llanilmaydi — ularning o'rniga maksimal ishga tushirish samaradorligi uchun Hermes bayt-kodi bilan to'liq bundle ishlatiladi. Bunga ishlab chiqish tezligining oshishi birinchi to'liq kompilatsiya xarajatlarini qoplashi orqali erishiladi.

Hermes va Metro: birgalikda ishlash

Hermes — Meta tomonidan React Native uchun maxsus ishlab chiqilgan JavaScript dvigatelidir. Metro kompilatsiya bosqichida Hermes bayt-kodini yaratadi, bu esa ilovani qurilmada qimmat JavaScript kompilatsiyasisiz ishga tushirish imkonini beradi. Hermes-ni yoqish uchun metro.config.js-ga enableHermes: true qo'shish va build.gradle yoki Podfile-ni sozlash kifoya. Hermes JavaScriptCore bilan solishtirganda ilovani ishga tushirish vaqtini 30–50% kamaytiradi va APK hajmini 20–30% qisqartiradi.

Hermes-dan foydalanganda cheklovlarni yodda tutish muhim: dvigatel Proxy, Reflect va ba'zi ES6 imkoniyatlarini qo'llab-quvvatlamaydi. Aksariyat React Native ilovalari bu imkoniyatlardan to'g'ridan-to'g'ri foydalanmaydi, ammo ba'zi kutubxonalar ziddiyatga olib kelishi mumkin. Hermes-ni yoqishdan oldin barcha loyiha bog'liqliklarining mosligini rasmiy moslik ro'yxati orqali tekshiring. Metro Hermes faollashtirilganda avtomatik ravishda bayt-kod yaratish rejimiga o'tadi.

Metro samaradorligini kuzatish

Metro kompilatsiyasi samaradorligini kuzatish uchun Flipper — React Native tuzatish vositasi orqali mavjud bo'lgan o'rnatilgan metrikalardan foydalaning. Metro har bir bosqichning bajarilish vaqti bilan hodisalarni nashr etadi: bundle_request, transform, resolve. Ushbu ma'lumotlarni tahlil qilish tor joylarni aniqlashga yordam beradi: agar transform bosqichi vaqtning 70% dan ortig'ini olsa, muammo Babel transformatoridadir. Batafsil diagnostika uchun --verbose bayrog'i orqali Metro jurnallarini yoqing.