Metro: bu nədir, əsas imkanları və iş prinsipi

Metro nədir?

Metro — Meta komandası tərəfindən React Native üçün yaradılmış açıq mənbəli JavaScript bundleridir. O, React Native-in ilkin versiyalarındakı Packager-i əvəz etdi və bu platforma üçün standart kompilasiya alətinə çevrildi. Metro veb inkişafı üçün nəzərdə tutulmayıb: onun arxitekturası yalnız JSC (JavaScriptCore) və ya Hermes JavaScript mühərrikləri altında işləyən mobil tətbiqlərə yönəlmişdir.

Yaranma tarixi və mövqeləndirmə

Metro 2018-ci ildə köhnə React Native Packager-in əvəzi olaraq ortaya çıxdı. Yaranmasının əsas səbəbi böyük mobil tətbiqlərdə milyonlarla modulla səmərəli işləyə biləcək bir bundlerə ehtiyac idi. Webpack-dən fərqli olaraq, Metro CSS, HTML və ya şəkilləri modul kimi dəstəkləmir — bu resurslar React Native-in ayrı alətləri ilə emal olunur. Facebook 100 mindən çox faylı olan əsas tətbiqini qurmaq üçün Metro-dan istifadə edir.

Metro npm vasitəsilə metro paketi kimi yayılır və React Native CLI ilə birlikdə avtomatik quraşdırılır. Metro versiyası React Native versiyasına bağlıdır, buna görə bundlerin yenilənməsi platformanın yenilənməsi ilə birlikdə baş verir.

Metro bundleri necə işləyir?

Metro girişdə tətbiqin giriş nöqtəsini qəbul edir, asılılıq qrafını qurur, hər modulu transformasiya edir və nəticəni vahid bundle-a serializasiya edir. Proses üç fazadan keçir: Resolve (modulların həlli), Transform (transformasiya) və Serialize (serializasiya).

Metro-da kompilasiya prosesi

// Xüsusi transformasiya üçün Metro konfiqurasiya nümunəsi
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 mərhələsində Metro hər idxal edilən modulun yerini, aliasları və node_modules-u nəzərə alaraq mövqeyini müəyyənləşdirir. Transform mərhələsində hər fayl JSX, TypeScript və digər genişləndirmələri təm JavaScript-ə çevirmək üçün Babel transformatorundan keçir. Son Serialize mərhələsi bütün transformasiya olunmuş modulları bir və ya bir neçə bundle faylına toplayır.

Metro arxitekturası

Metro modular arxitektura üzərində qurulmuşdur, burada kompilasiyanın hər mərhələsi ayrıca komponent kimi həyata keçirilmişdir. Bu, bundlerin özəyini dəyişmədən standart modulları xüsusi olanlarla əvəz etməyə imkan verir. Metro arxitekturası üç əsas paketi əhatə edir: metro, metro-config və metro-resolver.

Metro-nun əsas komponentləri

Metro Server — npx react-native start komandası ilə işə salınan tərtibat serveridir. O, real vaxtda modul transformasiya sorğularına xidmət edir, Fast Refresh təmin edir. Module Store — təkrar kompilasiyaları sürətləndirmək üçün transformasiya olunmuş modulları yaddaşda saxlayan keş. Dependency Graph — fayllar dəyişərkən artımlı şəkildə yenilənən asılılıq qrafı.

Watchman — Metro-nun fayl sistemindəki dəyişiklikləri aşkarlamaq üçün istifadə etdiyi Meta-nın fayl müşahidəçisidir. Watchman olmadan Metro hər dəyişiklikdə bütün fayl quruluşunu yenidən skan etməli olur, bu da inkişafı əhəmiyyətli dərəcədə yavaşaldır. Watchman quraşdırma istənilən ölçüdəki layihələrdə Metro ilə rahat işləmək üçün məcburidir.

React Native layihəsində Metro konfiqurasiyası

Konfiqurasiya Metro layihənin kök qovluğunda metro.config.js faylında müəyyənləşdirilir. Tipik fayl modulların axtarışı üçün əlavə qovluqlar, lazımsız faylları istisna etmək üçün bloklamalar və xüsusi transformatorlar təyin edir. React Native 0.72+-də konfiqurasiyanın avtomatik aşkarlanması istifadə olunur, lakin monorepozitoriyalar üçün konfiqurasiya məcburidir.

React Native üçün əsas Metro konfiqurasiyası

// 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 fayllarını kompilasiyadan istisna edir, bundle ölçüsünü azaldır. nodeModulesPaths paketlərin axtarışı üçün əlavə yollar göstərir — monorepozitoriyalar üçün kritikdir. extraNodeModules monorepozitoriyanın müxtəlif layihələrində istifadə olunan ümumi paketlər üçün aliaslar yaradır.

Metro kompilasiyasının optimallaşdırılması

Metro bundle ölçüsü və kompilasiya sürətini optimallaşdırmaq üçün bir neçə mexanizm təmin edir. Inline Requires — ən təsirli texnika, yuxarı səviyyəli idxalları funksiyalar daxilində lokal require-ə çevirir. RAM bundles modulların artımlı yüklənməsinə imkan verir. Hermes JavaScript-i bayt-koda kompilasiya edir, tətbiqin ölçüsünü 20–30% azaldır.

Inline Requires və Hermes-in aktivləşdirilməsi

// metro.config.js — istehsal üçün optimallaşdırma
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-i aktivləşdirmək üçün — build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// iOS üçün — Podfile: :hermes_enabled => true

Bundle ölçüsünün diaqnostikası üçün Metro statistik məlumat çıxışı ilə --bundle-output bayrağını təmin edir. Bundle-in tərkibini təhlil etmək və tənəl yüklənə biləcək böyük modulları tapmaq üçün bundle-visualizer istifadə edin. Bundle ölçüsünün mütəmadi yoxlanması React Native layihəsinin CI/CD boru kəmərinin bir hissəsi olmalıdır.

Delta Bundles və artımlı kompilasiya

Metro delta-bundle-ları dəstəkləyir — ilk tam kompilasiyadan sonra serverin köhnə və yeni bundle versiyaları arasında yalnız dəyişiklikləri (delta) göndərdiyi mexanizm. Bu, sonrakı kompilasiyaları köklü şəkildə sürətləndirir: yenilənmə vaxtı saniyələrdən onlarla millisaniyəyə enir. Delta-bundle-lar xüsusilə tərtibat mərhələsində, proqramçı tez-tez dəyişiklikləri yadda saxlayıb tətbiqi yenidən yüklədikdə təsirli olur.

React Native-də delta-bundle-ları aktivləşdirmək üçün npx react-native bundle komandasında --delta bayrağı istifadə olunur. Klient tərəfində delta-bundle-lar React Native 0.64-dən etibarən dəstəklənir. İstehsal kompilasiyalarında delta-bundle-lar tətbiq edilmir — onların əvəzinə maksimum başlanğıc performansı üçün Hermes bayt-kodu ilə tam bundle istifadə olunur. Bu, inkişaf sürətinin artımının ilk tam kompilasiya xərclərini kompensasiya etməsi ilə əldə edilir.

Hermes və Metro: birgə iş

Hermes — Meta tərəfindən xüsusi olaraq React Native üçün hazırlanmış JavaScript mühərrikidir. Metro kompilasiya mərhələsində Hermes bayt-kodu yaradır ki, bu da tətbiqin cihazda bahalı JavaScript kompilasiyası olmadan işə düşməsinə imkan verir. Hermes-i aktivləşdirmək üçün metro.config.js-də enableHermes: true əlavə etmək və build.gradle və ya Podfile-ı konfiqurasiya etmək kifayətdir. Hermes JavaScriptCore ilə müqayisədə tətbiqin başlanğıc vaxtını 30–50% azaldır və APK ölçüsünü 20–30% kiçildir.

Hermes istifadə edərkən məhdudiyyətləri xatırlamaq vacibdir: mühərrik Proxy, Reflect və bəzi ES6 imkanlarını dəstəkləmir. Əksər React Native tətbiqləri bu imkanlardan birbaşa istifadə etmir, lakin bəzi kitabxanalar münaqişə yarada bilər. Hermes-i aktivləşdirməzdən əvvəl bütün layihə asılılıqlarının uyğunluğunu rəsmi uyğunluq siyahısı vasitəsilə yoxlayın. Metro Hermes aktivləşdirildikdə avtomatik olaraq bayt-kod yaratma rejiminə keçir.

Metro performansının monitorinqi

Metro kompilasiyasının səmərəliliyini izləmək üçün Flipper — React Native debug aləti vasitəsilə əldə olunan daxili metrikalardan istifadə edin. Metro hər mərhələnin icra vaxtı ilə bağlı hadisələr dərc edir: bundle_request, transform, resolve. Bu məlumatların təhlili dar boğazları müəyyənləşdirməyə kömək edir: əgər transform fazası vaxtın 70%-dən çoxunu tutursa, problem Babel transformatorundadır. Ətraflı diaqnostika üçün Metro loglarını --verbose bayrağı vasitəsilə aktivləşdirin.