Metro Bundler: nedir, proje paketleme ve çalışma prensibi

Metro Bundler Nedir

Metro Bundler, Meta tarafından React Native için geliştirilen ve tüm framework projelerinde varsayılan olarak kullanılan açık kaynaklı bir JavaScript paketleyicisidir. Metro'nun görevi, projenin JavaScript kodunu bağımlılıklarıyla birlikte alıp cihazda çalışan bir veya daha fazla paket halinde birleştirmektir. Evrensel paketleyicilerden (Webpack, Rollup, Parcel) farklı olarak Metro, mobil geliştirmenin özelliklerine göre optimize edilmiştir: minimum derleme süresi, geliştirme sırasında artımlı güncellemeler ve platform modüllerinin (Objective-C, Swift, Java, Kotlin doğal modülleri) doğru şekilde işlenmesi. Metro, React Native CLI'nin bir parçası olarak gelir ve ayrı bir kurulum gerektirmez. React Native 0.72'den itibaren Metro sürüm 0.80+, modüllerin paralel dönüştürülmesini destekleyerek çok çekirdekli işlemcilerde derlemeleri %40'a kadar hızlandırır.

Metro Mimarisi: Resolver, Transformer ve Bundler

Metro'nun mimarisi üç bağımsız bileşene ayrılmıştır: Resolver, Transformer ve Bundler. Resolver, modülleri bulma ve çözümlemeden sorumludur — import/require ifadelerini okur, platform uzantılarını dikkate alarak ilgili dosyaları bulur ve mutlak yolları döndürür. Transformer, dönüştürme işlemini gerçekleştirir: Babel'i presets ve plugins ile uygular, JSX, TypeScript veya Flow'u saf JavaScript'e dönüştürür. Bundler son aşamadır: Resolver'dan bağımlılık grafiğini ve Transformer'dan dönüştürülmüş dosyaları alır, ardından bunları bir veya daha fazla pakete (modül paketleri) serileştirir. Üç adıma ayrılma, Metro'nun her aşamanın sonuçlarını önbelleğe almasını sağlar: yalnızca bir dosya değiştiyse, Resolver ve Bundler kalan modüller için önbelleği kullanabilir ve geliştirme modunda derleme hızında 10 kata kadar artış sağlar.

Resolver: Modül Çözümleme ve Platform Bilincinde Arama

Metro'daki Resolver, Node.js modül çözümlemesiyle kısmen uyumlu bir modül çözümleme algoritması uygular. Node.js'den temel fark, platform uzantıları desteğidir: require(‘./Component’) belirtilen öncelik sırasına göre Component.native.js, Component.ios.js, Component.android.js dosyalarını arar. Resolver ayrıca modülleri alternatif uygulamalara eşlemek için package.json alanı “react-native” desteği sağlar — bu, platforma özgü koda sahip kütüphaneler için standart mekanizmadır. Bir dosya bulunamazsa, Resolver tam arama yığınıyla birlikte bir hata fırlatır.

Transformer: Babel ve Dönüştürme

Metro içindeki Transformer, metro-react-native-babel-preset ön ayarıyla Babel kullanır. Standart yapılandırma şunları içerir: JSX'in React.createElement'e dönüştürülmesi, TypeScript desteği (türlerin kaldırılması), Flow desteği ve modern JavaScript standartları (async/await, optional chaining, nullish coalescing) için polyfill'ler. Transformer paralel modda çalışır: her modül, bir işçi süreç havuzu kullanılarak bağımsız olarak dönüştürülür (varsayılan olarak sayı, CPU sayısına karşılık gelir). Metro 0.80'den itibaren, Granular Transformer Cache desteklenir — tek dosya düzeyinde önbellek geçersiz kılma.

Metro'da Platforma Özgü Uzantılar

Metro'nun temel özelliklerinden biri, platform dosya uzantıları desteğidir. Bir React Native projesi aynı modülün üç sürümünü içerebilir: Component.ios.js (iOS), Component.android.js (Android) ve Component.native.js (her iki platform). require(‘./Component’) içe aktarılırken Resolver, hedef derleme platformuna bağlı olarak otomatik olarak doğru sürümü seçer. Bu, koşullu Platform.OS yapıları olmadan platforma bağımlı kod yazmayı sağlar. Öncelik sırası: ad.platform.js > ad.native.js > ad.js. .native.js uzantısı, her iki platformda da çalışan ancak web ile uyumsuz olan ortak kod için kullanılır. .ios.js ve .android.js uzantıları, belirli özellikleri uygulamak için kullanılır — gezinme, jestler, dosya sistemi işlemleri. Metro, resolver.sourceExts yapılandırması aracılığıyla özel uzantıları destekler.

// metro.config.js — sourceExts ve watchFolders kurulumu
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 Sıcak Yeniden Yükleme ve Fast Refresh

Fast Refresh, Metro üzerine inşa edilmiş React Native için bir sıcak yeniden yükleme mekanizmasıdır. Bir geliştirici dosyayı değiştirdiğinde, Metro yalnızca değiştirilen modülü yeniden dönüştürür ve güncellemeyi WebSocket aracılığıyla uygulamaya gönderir. Fast Refresh, tüm uygulamayı yeniden yüklemeden kullanıcı arayüzünü günceller ve yalnızca JSX veya stiller değiştiyse React bileşen durumunu korur. Hook'lar veya durum içeren kod değişirse, Fast Refresh yalnızca değiştirilen bileşeni yeniden bağlar. Metro iki modu destekler: Hot Module Replacement (HMR) anında modül değişimi için ve Live Reload, doğal modüller veya yapılandırma değiştiğinde tam uygulama yeniden yüklemesi için. Fast Refresh, React Native 0.76'da varsayılan olarak etkindir ve ek yapılandırma gerektirmez — sadece npx react-native start komutunu çalıştırmanız yeterlidir.

Metro Yapılandırması: metro.config.js

metro.config.js dosyası, bir React Native projesinin kökünde bulunan Metro yapılandırma dosyasıdır. Burada yapılandırılanlar: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) ve watcher (watchFolders, healthCheck). Standart Metro yapılandırması, @react-native/metro-config paketinden (React Native 0.76+) devralır. Monorepo projeleri için watchFolders ekleyin — bu, Metro'nun proje kökü dışındaki paketlerdeki değişiklikleri izlemesini sağlar. sourceExts'i yapılandırmak için özel dönüştürücüler için ‘svg’, ‘png’, ‘gql’ ekleyin. Metro, async işlevi aracılığıyla eşzamansız yapılandırmaları destekler — bu, ortama bağlı dinamik yapılandırma oluşturma için kullanışlıdır.

Yapılandırma Yoluyla Derleme Optimizasyonu

Metro derlemelerinin optimizasyonu, uygun önbellek yapılandırmasıyla başlar. maxWorkers değerini CPU sayısı eksi 1 olarak ayarlayın. Dağıtımlar için CI'da resetCache kullanın. sourceExts'i en aza indirin — fazla uzantılar modül çözümlemeyi yavaşlatır. Büyük projeler için watchFolders yalnızca gerekli dizinler için yapılandırın. Metro, standart Terser'dan daha küçük paket boyutu sağlayan Hermes bayt kodu küçültmeyi destekler — minifierPath: ‘metro-minify-terser’ kullanın.

Hermes Paketleme: Bayt Koduna Derleme

Metro, JavaScript AST aşamasını atlayarak doğrudan Hermes bayt koduna derleme modunu destekler. HermesTransformer ile derleme yaparken, modüller düz JavaScript yerine HBC (Hermes ByteCode) olarak derlenir. Bu şunları sağlar: daha küçük paket boyutu (%30-40), daha hızlı uygulama başlatma (%20-30) ve daha düşük bellek tüketimi. Etkinleştirmek için metro.config.js'de hermesCommand ayarlayın ve build.gradle (Android) veya Podfile (iOS) içinde Hermes bayrağını etkinleştirin. Hermes paket derlemesi iki aşamada yapılır: önce Metro JavaScript paketini oluşturur, ardından Hermes CLI bunu HBC'ye dönüştürür. React Native 0.70'ten itibaren Hermes, Android'de varsayılan motordur, iOS'te açıkça etkinleştirilmesi gerekir.

Metro ve Webpack: Yaklaşımların Karşılaştırması

Metro ve Webpack arasındaki fark, farklı hedeflerden kaynaklanmaktadır. Webpack, devasa bir eklenti ve yükleyici ekosistemine sahip web için evrensel bir paketleyicidir. Metro, artımlı derleme hızı ve doğal modüllerle doğru çalışmanın öncelikli olduğu React Native için özel bir paketleyicidir. Webpack, akıllı önbellek geçersiz kılma ile uzun süreli bir modül grafiği kullanır — bu web'de hızlı yeniden derleme sağlar ancak platform uzantılarında sorun yaratır. Metro, derlemeler arasında grafiği önbelleğe almaz, her seferinde oluşturur — bu, platform uzantılarının ve Haste modüllerinin işlenmesini basitleştirir. Webpack, parçalarla dinamik içe aktarmayı destekler, Metro da React.lazy() ve Suspense aracılığıyla destekler, ancak bir etkin istek sınırlamasıyla. Metro'nun ekosistemi önemli ölçüde daha küçüktür: style-loader, css-loader, file-loader için bir yedek yoktur — bu görevler React Native'de farklı şekilde çözülür.

Metro Ne Zaman Seçilmeli

Metro, React Native projeleri için tek doğru seçimdir. Webpack, platform bilincinde çözümlemeyi varsayılan olarak desteklemez ve React Native'i Webpack ile kurmak önemli çaba gerektirir (haul bundler, expo web packager). Metro, React Native CLI'ye entegre edilmiştir, Meta'nın resmi ekibi tarafından desteklenir ve her React Native sürümüyle güncelleme alır. React Native Web projeleri için, mobil paketler için Metro'yu korurken web derlemeleri için Webpack kullanabilirsiniz.