Metro: nedir, temel özellikleri ve çalışma prensibi

Metro nedir?

Metro, Meta ekibi tarafından React Native için oluşturulmuş açık kaynaklı bir JavaScript paketleyicisidir. React Native'in ilk sürümlerindeki Packager'ın yerini almış ve bu platform için standart derleme aracı haline gelmiştir. Metro web geliştirme için tasarlanmamıştır: mimarisi tamamen JSC (JavaScriptCore) veya Hermes JavaScript motorlarında çalışan mobil uygulamalara odaklanmıştır.

Geliştirme geçmişi ve konumlandırma

Metro, 2018 yılında eski React Native Packager'ın yerini almak üzere ortaya çıktı. Oluşturulmasının ana nedeni, büyük mobil uygulamalarda milyonlarca modülle verimli bir şekilde çalışabilen bir paketleyiciye duyulan ihtiyaçtı. Webpack'in aksine Metro, CSS, HTML veya görselleri modül olarak desteklemez — bu kaynaklar ayrı React Native araçları tarafından işlenir. Facebook, 100 binden fazla dosya içeren ana uygulamasını oluşturmak için Metro'yu kullanır.

Metro, npm üzerinden metro paketi olarak dağıtılır ve React Native CLI ile birlikte otomatik olarak kurulur. Metro sürümü, React Native sürümüne bağlıdır, bu nedenle paketleyici güncellemesi platform güncellemesiyle birlikte gerçekleşir.

Metro paketleyicisi nasıl çalışır?

Metro, uygulamanın giriş noktasını girdi olarak alır, bir bağımlılık grafiği oluşturur, her modülü dönüştürür ve sonucu tek bir pakette serileştirir. Süreç üç aşamadan geçer: Resolve (modül çözümleme), Transform (dönüştürme) ve Serialize (serileştirme).

Metro'da derleme süreci

// Özel dönüştürme için Metro yapılandırma örneği
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 aşamasında Metro, takma adları ve node_modules'ı dikkate alarak içe aktarılan her modülün konumunu belirler. Transform aşamasında, her dosya JSX, TypeScript ve diğer uzantıları saf JavaScript'e dönüştürmek için bir Babel dönüştürücüsünden geçer. Son Serialize aşaması, dönüştürülen tüm modülleri bir veya daha fazla paket dosyasında toplar.

Metro Mimarisi

Metro, her derleme aşamasının bağımsız bir bileşen olarak uygulandığı modüler bir mimari üzerine inşa edilmiştir. Bu, paketleyici çekirdeğini değiştirmeden standart modüllerin özel modüllerle değiştirilmesine olanak tanır. Metro mimarisi üç ana paket içerir: metro, metro-config ve metro-resolver.

Metro'nun temel bileşenleri

Metro Server — npx react-native start komutuyla başlatılan bir geliştirme sunucusudur. Gerçek zamanlı olarak modül dönüştürme isteklerini karşılayarak Fast Refresh sağlar. Module Store — yeniden derlemeleri hızlandırmak için dönüştürülmüş modülleri bellekte depolayan bir önbellektir. Dependency Graph — dosyalar değiştiğinde artımlı olarak güncellenen bir bağımlılık grafiğidir.

Watchman — Metro'nun dosya sistemindeki değişiklikleri algılamak için kullandığı Meta'nın dosya izleyicisidir. Watchman olmadan, Metro her değişiklikte tüm dosya yapısını yeniden taramak zorunda kalır ve bu da geliştirmeyi önemli ölçüde yavaşlatır. Watchman kurulumu, her boyuttaki projede Metro ile rahat çalışmak için zorunludur.

React Native Projesinde Metro Yapılandırması

Yapılandırma, proje kökündeki metro.config.js dosyasında belirlenir. Tipik bir dosya, modül arama için ek klasörler, gereksiz dosyaları hariç tutmak için engelleme listeleri ve özel dönüştürücüler tanımlar. React Native 0.72+'da otomatik yapılandırma algılama kullanılır, ancak monorepolar için yapılandırma zorunludur.

React Native için temel Metro yapılandırması

// 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, paket boyutunu küçültmek için test dosyalarını derlemeden hariç tutar. nodeModulesPaths, paket arama için ek yollar belirtir — monorepolar için kritiktir. extraNodeModules, monorepoda farklı projelerde kullanılan ortak paketler için takma adlar oluşturur.

Metro Derleme Optimizasyonu

Metro, paket boyutunu ve derleme hızını optimize etmek için çeşitli mekanizmalar sağlar. Inline Requires — en etkili teknik olup, üst düzey içe aktarımları işlevler içindeki yerel require çağrılarına dönüştürür. RAM bundles, modüllerin artımlı olarak yüklenmesine olanak tanır. Hermes, JavaScript'i bayt koduna derleyerek uygulama boyutunu %20–30 oranında azaltır.

Inline Requires ve Hermes'i etkinleştirme

// metro.config.js — üretim optimizasyonu
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 etkinleştirmek için — build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// iOS için — Podfile'da: :hermes_enabled => true

Paket boyutu teşhisi için Metro, istatistik çıktısıyla birlikte --bundle-output bayrağını sağlar. Paket kompozisyonunu analiz etmek ve tembel yüklenebilecek büyük modülleri bulmak için bundle-visualizer kullanın. Düzenli paket boyutu kontrolü, React Native projesinin CI/CD hattının bir parçası olmalıdır.

Delta Paketler ve artımlı derleme

Metro, delta paketlerini destekler — ilk tam derlemeden sonra sunucunun eski ve yeni paket sürümleri arasındaki yalnızca değişiklikleri (delta) gönderdiği bir mekanizmadır. Bu, sonraki derlemeleri kökten hızlandırır: güncelleme süresi saniyelerden onlarca milisaniyeye düşer. Delta paketleri, geliştiricinin sık sık değişiklik kaydettiği ve uygulamayı yeniden yüklediği geliştirme aşamasında özellikle etkilidir.

React Native'de delta paketlerini etkinleştirmek için npx react-native bundle komutunda --delta bayrağı kullanılır. İstemci tarafında delta paketleri React Native 0.64'ten itibaren desteklenir. Üretim derlemelerinde delta paketleri kullanılmaz — bunun yerine maksimum başlangıç performansı için Hermes bayt kodu içeren tam paket kullanılır. Bu, geliştirme hızındaki kazancın ilk tam derleme maliyetini telafi etmesi nedeniyle mümkündür.

Hermes ve Metro: birlikte çalışma

Hermes, Meta tarafından özellikle React Native için geliştirilmiş bir JavaScript motorudur. Metro, derleme aşamasında Hermes bayt kodu oluşturarak uygulamanın cihazda pahalı JavaScript derlemesi olmadan başlatılmasını sağlar. Hermes'i etkinleştirmek için metro.config.js'ye enableHermes: true ekleyin ve build.gradle veya Podfile'ı yapılandırın. Hermes, JavaScriptCore'a kıyasla uygulama başlatma süresini %30–50 ve APK boyutunu %20–30 oranında azaltır.

Hermes kullanırken sınırlamaları hatırlamak önemlidir: motor Proxy, Reflect ve bazı ES6 özelliklerini desteklemez. Çoğu React Native uygulaması bu özellikleri doğrudan kullanmaz, ancak bazı kütüphaneler çakışabilir. Hermes'i etkinleştirmeden önce, resmi uyumluluk kontrol listesi aracılığıyla tüm proje bağımlılıklarının uyumluluğunu kontrol edin. Hermes etkinleştirildiğinde Metro otomatik olarak bayt kodu oluşturma moduna geçer.

Metro performansını izleme

Metro derleme verimliliğini izlemek için Flipper — React Native hata ayıklama aracı — aracılığıyla kullanılabilen yerleşik metrikleri kullanın. Metro, her aşamanın yürütme süresiyle birlikte bundle_request, transform, resolve olaylarını yayınlar. Bu verilerin analizi, darboğazların belirlenmesine yardımcı olur: dönüştürme aşaması sürenin %70'inden fazlasını alıyorsa, sorun Babel dönüştürücüsündedir. Ayrıntılı teşhis için --verbose bayrağıyla Metro günlüğünü etkinleştirin.