Metro Bundler: bu nədir, layihənin yığılması və iş prinsipi

Metro Bundler nədir

Metro Bundler Meta tərəfindən React Native üçün hazırlanmış və frameworkün bütün layihələrində standart olaraq istifadə olunan açıq mənbəli JavaScript bündleridir. Metro-nun vəzifəsi layihənin JavaScript kodunu asılılıqlarla birlikdə götürüb cihazda icra olunan bir və ya bir neçə bündl yığmaqdır. Universal bündlerlərdən (Webpack, Rollup, Parcel) fərqli olaraq, Metro mobil inkişafın spesifikası üçün optimallaşdırılıb: minimal yığım vaxtı, inkişaf zamanı inkremental yeniləmələr və platforma modulları (Objective-C, Swift, Java, Kotlin nativ modulları) ilə düzgün işləmə. Metro React Native CLI tərkibində verilir və ayrıca quraşdırma tələb etmir. React Native 0.72-dən başlayaraq, Metro versiyası 0.80+ modulların paralel transplyasiyasını dəstəkləyir ki, bu da çoxnüvəli prosessorlarda yığımı 40% sürətləndirir.

Metro Arxitekturası: Resolver, Transformer və Bundler

Metro arxitekturası üç müstəqil komponentə bölünür: Resolver, Transformer və Bundler. Resolver modulların axtarışı və həlli üçün cavabdehdir — import/require ifadələrini oxuyur, platforma genişlənmələrini nəzərə alaraq müvafiq faylları tapır və mütləq yolları qaytarır. Transformer transplyasiyanı həyata keçirir: Babel-i presetlər və pluginlərlə tətbiq edir, JSX, TypeScript və ya Flow-u təmiz JavaScript-ə çevirir. Bundler son mərhələdir: Resolver-dən asılılıq qrafını və Transformer-dən çevrilmiş faylları qəbul edir, sonra onları bir və ya bir neçə bündldə (module bundles) seriyalaşdırır. Üç mərhələyə bölünmə Metro-ya hər mərhələnin nəticələrini keşləməyə imkan verir: yalnız bir fayl dəyişibsə, Resolver və Bundler qalan modullar üçün keşdən istifadə edə bilər ki, bu da inkişaf rejimində yığım sürətini 10 dəfəyə qədər artırır.

Resolver: modul həlli və platforma-aware axtarış

Resolver Metro-da qismən Node.js module resolution ilə uyğun olan modul həlli alqoritmini tətbiq edir. Node.js-dən əsas fərq — platforma genişlənmələrinin dəstəyidir: require('./Component') müəyyən edilmiş prioritet sırası ilə Component.native.js, Component.ios.js, Component.android.js fayllarını axtarır. Resolver həmçinin modulları alternativ tətbiqlərə xəritələmək üçün package.json "react-native" sahəsini dəstəkləyir — bu, platforma kodlu kitabxanalar üçün standart mexanizmdir. Fayl tapılmazsa, Resolver tam axtarış steki ilə xəta atır.

Transformer: Babel və transplyasiya

Transformer Metro daxilində metro-react-native-babel-preset ilə Babel-dən istifadə edir. Standart konfiqurasiyaya daxildir: JSX-in React.createElement-ə çevrilməsi, TypeScript dəstəyi (tiplərin silinməsi), Flow dəstəyi və müasir JavaScript standartları üçün polifillər (async/await, optional chaining, nullish coalescing). Transformer paralel rejimdə işləyir: hər modul müstəqil transplyasiya olunur, işçi proseslər hovuzundan istifadə etməklə (standart olaraq sayı CPU sayına uyğundur). Metro 0.80-dən etibarən Granular Transformer Cache dəstəklənir — ayrıca fayl səviyyəsində keşin etibarsızlaşdırılması.

Metro-da platforma genişlənmələri

Metro-nun əsas xüsusiyyətlərindən biri platforma fayl genişlənmələrini dəstəkləməsidir. React Native layihəsində bir modulun üç versiyası ola bilər: Component.ios.js (iOS), Component.android.js (Android) və Component.native.js (hər iki platforma). require('./Component') idxalında Resolver avtomatik olaraq hədəf yığım platformasından asılı olaraq düzgün versiyanı seçir. Bu, Platform.OS şərti konstruksiyaları olmadan platformadan asılı kod yazmağa imkan verir. Prioritet sırası: ad.platforma.js > ad.native.js > ad.js. .native.js genişlənməsi hər iki platformada işləyən, lakin veble uyğun olmayan ümumi kod üçün tətbiq olunur. .ios.js və .android.js genişlənmələri spesifik xüsusiyyətlərin tətbiqi üçün xidmət edir — naviqasiya, jestlər, fayl sistemi ilə iş. Metro resolver.sourceExts konfiqurasiyası vasitəsilə xüsusi genişlənmələri dəstəkləyir.

// metro.config.js — sourceExts və watchFolders qurulumu
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 və Fast Refresh

Fast Refresh Metro üzərində qurulmuş React Native isti yenidən yükləmə mexanizmidir. Tərtibatçı faylı dəyişdikdə, Metro yalnız dəyişdirilmiş modulu yenidən transplyasiya edir və WebSocket vasitəsilə tətbiqə yeniləmə göndərir. Fast Refresh bütün tətbiqi yenidən yükləmədən interfeysi yeniləyir və yalnız JSX və ya stillər dəyişdirilibsə, React komponentlərinin vəziyyətini qoruyur. Hooklar və ya vəziyyət ilə kod dəyişdirilibsə, Fast Refresh yalnız dəyişdirilmiş komponentin yenidən quraşdırılmasını həyata keçirir. Metro iki rejimi dəstəkləyir: modulların isti dəyişdirilməsi üçün Hot Module Replacement (HMR) və nativ modullar və ya konfiqurasiya dəyişdikdə tətbiqin tam yenidən yüklənməsi üçün Live Reload. Fast Refresh React Native 0.76-da standart olaraq aktivdir və əlavə konfiqurasiya tələb etmir — sadəcə npx react-native start işə salmaq kifayətdir.

Metro konfiqurasiyası: metro.config.js

metro.config.js React Native layihəsinin kökündə yerləşən Metro konfiqurasiya faylıdır. Orada konfiqurasiya edilir: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) və watcher (watchFolders, healthCheck). Standart Metro konfiqurasiyası @react-native/metro-config (React Native 0.76+) paketindən miras alınır. Monorepozitoriyalı layihələr üçün watchFolders əlavə edin — bu, Metro-ya layihə kökündən kənar paketlərdə dəyişiklikləri izləməyə imkan verəcək. sourceExts konfiqurasiyası üçün xüsusi transformatorlar üçün 'svg', 'png', 'gql' əlavə edin. Metro async function vasitəsilə asinxron konfiqurasiyaları dəstəkləyir — bu, mühit əsasında konfiqin dinamik generasiyası üçün faydalıdır.

Konfiqurasiya vasitəsilə yığımın optimallaşdırılması

Yığımın optimallaşdırılması Metro düzgün keş konfiqurasiyasından başlayır. maxWorkers-i CPU sayı minus 1-ə bərabər qoyun. Distributivlər üçün CI-da resetCache istifadə edin. sourceExts-i minimal saxlayın — əlavə genişlənmələr modul həllini yavaşladır. Böyük layihələr üçün watchFolders-ı yalnız zəruri kataloqlara konfiqurasiya edin. Metro standart Terser-dən daha kiçik bündl ölçüsü verən Hermes bytecode minification-u dəstəkləyir — minifierPath: 'metro-minify-terser' istifadə edin.

Hermes bündlinqi: bayt-koda yığım

Metro birbaşa Hermes bytecode-a yığım rejimini dəstəkləyir — JavaScript AST mərhələsini keçərək. HermesTransformer ilə yığımda modullar plain JavaScript əvəzinə HBC (Hermes ByteCode)-a kompilə olunur. Bu verir: daha kiçik bündl ölçüsü (30-40%), daha sürətli tətbiq başlanğıcı (20-30%) və daha az yaddaş istehlakı. Aktivləşdirmək üçün metro.config.js-də hermesCommand təyin edin və build.gradle (Android) və ya Podfile (iOS)-da Hermes bayrağını aktivləşdirin. Hermes bündllərinin yığımı iki mərhələdə həyata keçirilir: əvvəlcə Metro JavaScript bündl yığır, sonra Hermes CLI onu HBC-yə çevirir. React Native 0.70-dən başlayaraq, Hermes Android-də standart mühərrikdir, iOS-da açıq şəkildə aktivləşdirilmə tələb olunur.

Metro vs Webpack: yanaşmaların müqayisəsi

Metro və Webpack arasındakı fərq müxtəlif məqsədlərdən qaynaqlanır. Webpack nəhəng plugin və loader ekosisteminə malik universal veb bündleridir. Metro React Native üçün xüsusi bündlerdir, burada prioritet inkremental yığım sürəti və nativ modullarla düzgün işdir. Webpack ağıllı keş etibarsızlaşdırılması ilə uzunmüddətli modul qrafından istifadə edir — bu vebdə sürətli təkrar yığımlar verir, lakin platforma genişlənmələri ilə problemlər yaradır. Metro yığımlar arasında qrafı keşləmir, hər dəfə onu qurur — bu, platforma genişlənmələrinin və Haste modullarının işlənməsini sadələşdirir. Webpack chunklarla dinamik importları dəstəkləyir, Metro da — React.lazy() və Suspense vasitəsilə, lakin bir aktiv sorğu məhdudiyyəti ilə. Metro ekosistemi əhəmiyyətli dərəcədə kiçikdir: style-loader, css-loader, file-loader üçün əvəz yoxdur — bu tapşırıqlar React Native-də başqa cür həll olunur.

Metro nə vaxt seçilməlidir

Metro React Native layihələri üçün yeganə düzgün seçimdir. Webpack qutudan çıxan kimi platforma-aware resolution-u dəstəkləmir və React Native-in Webpack ilə konfiqurasiyası əhəmiyyətli səy tələb edir (haul bundler, expo web packager). Metro React Native CLI ilə inteqrasiya olunub, rəsmi Meta komandası tərəfindən dəstəklənir və React Native-in hər buraxılışı ilə yeniliklər alır. React Native Web layihələri üçün mobil bündllər üçün Metro-nu saxlayaraq veb yığımı üçün Webpack istifadə edilə bilər.