Metro Bundler: шта је то, прављење пројекта и принцип рада

Шта је Metro Bundler

Metro Bundler је JavaScript бандлер отвореног кода, развијен од стране Meta за React Native и коришћен подразумевано у свим пројектима фрејмворка. Задатак Metro-а је да узме JavaScript код пројекта заједно са зависностима и направи један или више бандлова који се извршавају на уређају. За разлику од универзалних бандлера (Webpack, Rollup, Parcel), Metro је оптимизован за специфичности мобилног развоја: минимално време прављења, инкрементална ажурирања током развоја и исправан рад са платформским модулима (нативни модули Objective-C, Swift, Java, Kotlin). Metro се испоручује у саставу React Native CLI и не захтева посебну инсталацију. Почев од React Native 0.72, Metro верзија 0.80+ подржава паралелну транспилацију модула, што убрзава прављење на вишејезгарним процесорима до 40%.

Архитектура Metro: Resolver, Transformer и Bundler

Архитектура Metro је подељена на три независне компоненте: Resolver, Transformer и Bundler. Resolver је одговоран за претрагу и резолуцију модула — чита import/require изразе, проналази одговарајуће фајлове узимајући у обзир платформска проширења и враћа апсолутне путање. Transformer врши транспилацију: примењује Babel са preset-има и plugin-има, претвара JSX, TypeScript или Flow у чисти JavaScript. Bundler је завршна фаза: прима граф зависности од Resolver-а и трансформисане фајлове од Transformer-а, затим их серијализује у један или више бандлова (module bundles). Подела на три корака омогућава Metro-у да кешира резултате сваке фазе: ако се променио само један фајл, Resolver и Bundler могу користити кеш за преостале модуле, што даје повећање брзине прављења до 10 пута у развојном режиму.

Resolver: резолуција модула и platform-aware претрага

Resolver у Metro-у имплементира алгоритам резолуције модула, делимично компатибилан са Node.js module resolution. Кључна разлика од Node.js-а — подршка за платформска проширења: require('./Component') тражи Component.native.js, Component.ios.js, Component.android.js у одређеном редоследу приоритета. Resolver такође подржава package.json поље "react-native" за мапирање модула на алтернативне имплементације — ово је стандардни механизам за библиотеке са платформским кодом. Ако фајл није пронађен, Resolver баца грешку са комплетним стеком претраге.

Transformer: Babel и транспилација

Transformer унутар Metro-а користи Babel са preset-ом metro-react-native-babel-preset. Стандардна конфигурација укључује: претварање JSX у React.createElement, подршку за TypeScript (уклањање типова), подршку за Flow и полифилове за модерне JavaScript стандарде (async/await, optional chaining, nullish coalescing). Transformer ради у паралелном режиму: сваки модул се транспилира независно, користећи pool worker процеса (подразумевано број одговара броју CPU-а). Почев од Metro 0.80, подржан је Granular Transformer Cache — инвалидација кеша на нивоу појединачног фајла.

Платформска проширења у Metro

Једна од кључних карактеристика Metro-а је подршка за платформска проширења фајлова. React Native пројекат може садржати три верзије истог модула: Component.ios.js (iOS), Component.android.js (Android) и Component.native.js(обе платформе). При импорту require('./Component'), Resolver аутоматски бира исправну верзију у зависности од циљне платформе прављења. Ово омогућава писање кода зависног од платформе без условних конструкција Platform.OS. Редослед приоритета: име.платформа.js > име.native.js > име.js. Проширење .native.js се користи за заједнички код који ради на обе платформе, али није компатибилан са вебом. Проширења .ios.js и .android.js служе за имплементацију специфичних функција — навигација, гестови, рад са фајл системом. Metro подржава прилагођена проширења кроз конфигурацију resolver.sourceExts.

// metro.config.js — подешавање sourceExts и watchFolders
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 и Fast Refresh у Metro

Fast Refresh је механизам врућег поновног учитавања React Native-а имплементиран на бази Metro-а. Када програмер промени фајл, Metro поново транспилира само измењени модул и шаље ажурирање апликацији преко WebSocket-а. Fast Refresh ажурира интерфејс без поновног учитавања целе апликације и чува React стање компоненти ако су промењени само JSX или стилови. Ако је промењен код са hook-овима или стањем, Fast Refresh врши поновно монтирање само измењене компоненте. Metro подржава два режима: Hot Module Replacement (HMR) за замену модула у лету и Live Reload за потпуно поновно учитавање апликације при промени нативних модула или конфигурације. Fast Refresh је подразумевано укључен у React Native 0.76 и не захтева додатну конфигурацију — довољно је покренути npx react-native start.

Конфигурација Metro: metro.config.js

metro.config.js је конфигурациони фајл Metro-а, који се налази у корену React Native пројекта. У њему се конфигуришу: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) и watcher (watchFolders, healthCheck). Стандардна конфигурација Metro се наслеђује од пакета @react-native/metro-config (React Native 0.76+). За пројекте са монорепозиторијумом, додајте watchFolders — ово ће омогућити Metro-у да прати промене у пакетима изван корена пројекта. За конфигурацију sourceExts, додајте 'svg', 'png', 'gql' за прилагођене трансформере. Metro подржава асинхроне конфигурације кроз async function — ово је корисно за динамичко генерисање конфигурације на основу окружења.

Оптимизација прављења кроз конфигурацију

Оптимизација прављења Metro-а почиње са правилном конфигурацијом кеша. Поставите maxWorkers на број CPU-а минус 1. За дистрибуције користите resetCache на CI-ју. Минимизирајте sourceExts — додатна проширења успоравају резолуцију модула. За велике пројекте, конфигуришите watchFolders само на потребне директоријуме. Metro подржава Hermes bytecode minification, који даје мању величину бандла од стандардног Terser-а — користите minifierPath: 'metro-minify-terser'.

Hermes бандлинг: прављење у бајт-код

Metro подржава режим прављења директно у Hermes bytecode — прескачући фазу JavaScript AST. При прављењу са HermesTransformer-ом, модули се компилирају у HBC (Hermes ByteCode) уместо у обичан JavaScript. Ово даје: мању величину бандла (за 30-40%), брже покретање апликације (за 20-30%) и мању потрошњу меморије. За активацију, поставите hermesCommand у metro.config.js и активирајте Hermes флаг у build.gradle (Android) или Podfile (iOS). Прављење Hermes бандлова се изводи у две фазе: прво Metro прави JavaScript бандл, затим Hermes CLI га конвертује у HBC. Почев од React Native 0.70, Hermes је подразумевани мотор на Android-у, на iOS-у захтева експлицитну активацију.

Metro против Webpack: поређење приступа

Разлика између Metro-а и Webpack-а произилази из различитих циљева. Webpack је универзални бандлер за веб са огромним екосистемом plugin-а и loadera. Metro је специјализовани бандлер за React Native, где је приоритет брзина инкременталног прављења и исправан рад са нативним модулима. Webpack користи дуготрајни граф модула са интелигентном инвалидацијом кеша — ово даје брза поновна прављења на вебу, али ствара проблеме са платформским проширењима. Metro не кешира граф између прављења, већ га гради сваки пут — ово поједностављује обраду платформских проширења и Haste модула. Webpack подржава динамичке импорте са чанковима, Metro такође — кроз React.lazy() и Suspense, али са ограничењем на један активан захтев. Metro екосистем је значајно мањи: не постоји замена за style-loader, css-loader, file-loader — ови задаци се решавају другачије у React Native.

Када изабрати Metro

Metro је једини исправан избор за React Native пројекте. Webpack не подржава platform-aware resolution из кутије, а конфигурација React Native-а са Webpack-ом захтева значајан напор (haul bundler, expo web packager). Metro је интегрисан у React Native CLI, подржан од званичног Meta тима и добија ажурирања са сваким издањем React Native-а. За React Native Web пројекте можете користити Webpack за веб прављење, задржавајући Metro за мобилне бандлове.