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 и polyfill за съвременни JavaScript стандарти (async/await, optional chaining, nullish coalescing). Transformer работи в паралелен режим: всеки модул се транспилира независимо, използвайки пул от работни процеси (по подразбиране броят съответства на броя 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 или стилове. Ако е променен код с hooks или състояние, 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-ове и loader-и. 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 за мобилни пакети.