Metro Bundler: mi ez, projekt építés és működési elv

Mi az a Metro Bundler

Metro Bundler egy nyílt forráskódú JavaScript bundler, amelyet a Meta fejlesztett ki a React Native számára, és alapértelmezés szerint használatos a framework összes projektjében. A Metro feladata, hogy a projekt JavaScript-kódját a függőségekkel együtt vegye, és egy vagy több bundle-t építsen, amelyek az eszközön futnak. Az univerzális bundlerektől (Webpack, Rollup, Parcel) eltérően a Metro a mobilfejlesztés sajátosságaira van optimalizálva: minimális építési idő, inkrementális frissítések fejlesztés közben és helyes működés a platformmodulokkal (Objective-C, Swift, Java, Kotlin natív modulok). A Metro a React Native CLI részeként érkezik, és nem igényel külön telepítést. A React Native 0.72-től kezdve a Metro 0.80+ verziója támogatja a modulok párhuzamos transpilációját, ami akár 40%-kal gyorsítja az építést a többmagos processzorokon.

Metro Architektúra: Resolver, Transformer és Bundler

A Metro architektúrája három független komponensre oszlik: Resolver, Transformer és Bundler. A Resolver felelős a modulok kereséséért és feloldásáért — olvassa az import/require kifejezéseket, megtalálja a megfelelő fájlokat a platformkiterjesztések figyelembevételével, és abszolút útvonalakat ad vissza. A Transformer végzi a transpilációt: alkalmazza a Babel-t presetekkel és pluginekkel, JSX-et, TypeScript-et vagy Flow-t tiszta JavaScript-té alakítva. A Bundler a végső szakasz: megkapja a függőségi gráfot a Resolver-től és a transzformált fájlokat a Transformer-től, majd egy vagy több bundle-ba szerializálja őket (module bundles). A három lépésre bontás lehetővé teszi a Metro számára, hogy gyorsítótárazza az egyes szakaszok eredményeit: ha csak egy fájl változott, a Resolver és a Bundler használhatja a gyorsítótárat a többi modulhoz, ami akár 10-szeres sebességnövekedést biztosít fejlesztési módban.

Resolver: modulfeloldás és platform-aware keresés

Resolver a Metro-ban részben kompatibilis a Node.js module resolution-nel. A legfontosabb különbség a Node.js-hez képest — a platformkiterjesztések támogatása: require('./Component') a megadott prioritási sorrendben keresi a Component.native.js, Component.ios.js, Component.android.js fájlokat. A Resolver támogatja továbbá a package.json "react-native" mezőt a modulok alternatív implementációkra való leképezéséhez — ez a szabványos mechanizmus a platformkódot tartalmazó könyvtárak számára. Ha a fájl nem található, a Resolver hibát dob a teljes keresési veremmel.

Transformer: Babel és transpiláció

Transformer a Metro-ban a Babel-t használja a metro-react-native-babel-preset preset-tel. A standard konfiguráció tartalmazza: JSX transzformációja React.createElement-ré, TypeScript támogatás (típusok eltávolítása), Flow támogatás és polyfill-ek a modern JavaScript szabványokhoz (async/await, optional chaining, nullish coalescing). A Transformer párhuzamos módban működik: minden modul függetlenül transpilálódik, worker folyamatok pool-ját használva (alapértelmezés szerint a szám megegyezik a CPU-k számával). A Metro 0.80-tól kezdve támogatott a Granular Transformer Cache — a gyorsítótár érvénytelenítése egyedi fájl szinten.

Platformkiterjesztések a Metro-ban

A Metro egyik kulcsfontosságú jellemzője a platform fájlkiterjesztések támogatása. Egy React Native projekt tartalmazhat három verziót egy modulból: Component.ios.js (iOS), Component.android.js (Android) és Component.native.js (mindkét platform). Az require('./Component') importálásakor a Resolver automatikusan kiválasztja a megfelelő verziót a célépítési platformtól függően. Ez lehetővé teszi a platformfüggő kód írását Platform.OS feltételes konstrukciók nélkül. A prioritási sorrend: név.platform.js > név.native.js > név.js. A .native.js kiterjesztés a mindkét platformon működő, de a webbel nem kompatibilis közös kódhoz használatos. A .ios.js és .android.js kiterjesztések specifikus funkciók implementálására szolgálnak — navigáció, gesztusok, fájlrendszerrel való munka. A Metro egyéni kiterjesztéseket támogat a resolver.sourceExts konfiguráción keresztül.

// metro.config.js — sourceExts és watchFolders beállítása
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')],
};

Hot Reload és Fast Refresh a Metro-ban

Fast Refresh a React Native forró újratöltési mechanizmusa, amely a Metro-ra épül. Amikor a fejlesztő megváltoztat egy fájlt, a Metro csak a megváltoztatott modult transpilálja újra, és elküldi a frissítést az alkalmazásnak WebSocketen keresztül. A Fast Refresh frissíti a felületet anélkül, hogy újratöltené a teljes alkalmazást, és megőrzi a React komponensek állapotát, ha csak JSX vagy stílusok változtak. Ha hook-okat vagy állapotot tartalmazó kód változott, a Fast Refresh csak a megváltoztatott komponens újracsatolását végzi el. A Metro két módot támogat: Hot Module Replacement (HMR) a modulok helyben történő cseréjéhez és Live Reload az alkalmazás teljes újratöltéséhez natív modulok vagy konfiguráció változásakor. A Fast Refresh alapértelmezés szerint be van kapcsolva a React Native 0.76-ban, és nem igényel további konfigurációt — elég futtatni a npx react-native start parancsot.

Metro Konfiguráció: metro.config.js

metro.config.js a Metro konfigurációs fájlja, amely a React Native projekt gyökerében található. Itt konfigurálható: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) és watcher (watchFolders, healthCheck). A standard Metro konfiguráció a @react-native/metro-config (React Native 0.76+) csomagtól öröklődik. Monorepozitóriumos projektek esetén adja hozzá a watchFolders-t — ez lehetővé teszi a Metro számára, hogy kövesse a változásokat a projekt gyökerén kívüli csomagokban. A sourceExts konfigurálásához adja hozzá a 'svg', 'png', 'gql' értékeket egyéni transzformátorokhoz. A Metro támogatja az aszinkron konfigurációkat async function segítségével — ez hasznos a konfiguráció dinamikus generálásához a környezet alapján.

Építés optimalizálása konfiguráción keresztül

Az építés optimalizálása a Metro-nál a megfelelő gyorsítótár konfigurációval kezdődik. Állítsa a maxWorkers értékét a CPU-k számának mínusz 1-re. Disztribúciókhoz használja a resetCache-et CI-ban. Minimalizálja a sourceExts-t — a további kiterjesztések lassítják a modulfeloldást. Nagy projektek esetén a watchFolders-t csak a szükséges könyvtárakra konfigurálja. A Metro támogatja a Hermes bytecode minification-t, ami kisebb bundle méretet ad, mint a standard Terser — használja a minifierPath: 'metro-minify-terser' beállítást.

Hermes bundling: építés bytecode-ba

A Metro támogatja a közvetlen Hermes bytecode-ba építési módot — kihagyva a JavaScript AST szakaszt. HermesTransformer-rel építve a modulok HBC-be (Hermes ByteCode) fordulnak a sima JavaScript helyett. Ez a következőket nyújtja: kisebb bundle méret (30-40%-kal), gyorsabb alkalmazásindítás (20-30%-kal) és kisebb memóriafogyasztás. Az aktiváláshoz állítsa be a hermesCommand-ot a metro.config.js-ben, és aktiválja a Hermes jelzőt a build.gradle (Android) vagy Podfile (iOS) fájlban. A Hermes bundle-ök építése két szakaszban történik: először a Metro megépíti a JavaScript bundle-t, majd a Hermes CLI konvertálja azt HBC-vé. A React Native 0.70-től kezdve a Hermes az alapértelmezett motor Androidon, iOS-en explicit aktiválást igényel.

Metro vs Webpack: megközelítések összehasonlítása

A Metro és a Webpack közötti különbség az eltérő célokból adódik. A Webpack egy univerzális bundler a web számára hatalmas plugin és loader ökoszisztémával. A Metro egy specializált bundler a React Native számára, ahol a prioritás az inkrementális építés sebessége és a natív modulokkal való helyes működés. A Webpack hosszú élettartamú modulgráfot használ intelligens gyorsítótár-érvénytelenítéssel — ez gyors újraépítéseket biztosít a weben, de problémákat okoz a platformkiterjesztésekkel. A Metro nem gyorsítótárazza a gráfot az építések között, hanem minden alkalommal felépíti — ez leegyszerűsíti a platformkiterjesztések és a Haste modulok feldolgozását. A Webpack támogatja a dinamikus importokat chunkokkal, a Metro is — a React.lazy() és Suspense segítségével, de egy aktív kérés korlátozásával. A Metro ökoszisztémája jelentősen kisebb: nincs helyettesítő a style-loader, css-loader, file-loader számára — ezek a feladatok másképp oldódnak meg a React Native-ban.

Mikor válassza a Metro-t

Metro az egyetlen helyes választás a React Native projektekhez. A Webpack nem támogatja a platform-aware resolution-t dobozból, és a React Native Webpack-kel való konfigurálása jelentős erőfeszítést igényel (haul bundler, expo web packager). A Metro integrálva van a React Native CLI-ba, a hivatalos Meta csapat támogatja, és minden React Native kiadással frissítéseket kap. React Native Web projektek esetén használhatja a Webpack-et a webes építéshez, miközben a Metro-t megtartja a mobil bundle-ökhöz.