Metro Bundler: co to je, sestavení projektu a princip fungování

Co je Metro Bundler

Metro Bundler je open-source JavaScriptový bundler vyvinutý společností Meta pro React Native a používaný ve výchozím nastavení ve všech projektech frameworku. Úkolem Metro je vzít JavaScriptový kód projektu spolu se závislostmi a sestavit jeden nebo více bundle, které se spouštějí na zařízení. Na rozdíl od univerzálních bundlerů (Webpack, Rollup, Parcel) je Metro optimalizováno pro specifika mobilního vývoje: minimální doba sestavení, inkrementální aktualizace při vývoji a správná funkce s platformovými moduly (nativní moduly Objective-C, Swift, Java, Kotlin). Metro je dodáváno v rámci React Native CLI a nevyžaduje samostatnou instalaci. Počínaje React Native 0.72 podporuje Metro verze 0.80+ paralelní transpilaci modulů, což urychluje sestavování na vícejádrových procesorech až o 40%.

Architektura Metro: Resolver, Transformer a Bundler

Architektura Metro je rozdělena do tří nezávislých komponent: Resolver, Transformer a Bundler. Resolver je zodpovědný za vyhledávání a rozlišení modulů — čte výrazy import/require, nachází odpovídající soubory s ohledem na platformová rozšíření a vrací absolutní cesty. Transformer provádí transpilaci: aplikuje Babel s presety a pluginy, převádí JSX, TypeScript nebo Flow na čistý JavaScript. Bundler je konečná fáze: přijímá graf závislostí od Resolveru a transformované soubory od Transformeru, poté je serializuje do jednoho nebo více bundle (module bundles). Rozdělení do tří kroků umožňuje Metro ukládat do cache výsledky každé fáze: pokud se změnil pouze jeden soubor, Resolver a Bundler mohou použít cache pro zbývající moduly, což poskytuje zvýšení rychlosti sestavování až 10krát ve vývojovém režimu.

Resolver: rozlišení modulů a platform-aware vyhledávání

Resolver v Metro implementuje algoritmus rozlišení modulů, částečně kompatibilní s Node.js module resolution. Klíčový rozdíl oproti Node.js — podpora platformových rozšíření: require('./Component') hledá Component.native.js, Component.ios.js, Component.android.js v určeném pořadí priority. Resolver také podporuje pole package.json "react-native" pro mapování modulů na alternativní implementace — to je standardní mechanismus pro knihovny s platformovým kódem. Pokud soubor není nalezen, Resolver vyhodí chybu s úplným zásobníkem vyhledávání.

Transformer: Babel a transpilace

Transformer uvnitř Metro používá Babel s presetem metro-react-native-babel-preset. Standardní konfigurace zahrnuje: transformaci JSX na React.createElement, podporu TypeScript (odstranění typů), podporu Flow a polyfill pro moderní standardy JavaScript (async/await, optional chaining, nullish coalescing). Transformer pracuje v paralelním režimu: každý modul je transpilován nezávisle s využitím poolu worker procesů (ve výchozím nastavení počet odpovídá počtu CPU). Od Metro 0.80 je podporován Granular Transformer Cache — zneplatnění cache na úrovni jednotlivého souboru.

Platformová rozšíření v Metro

Jednou z klíčových vlastností Metro je podpora platformových přípon souborů. Projekt React Native může obsahovat tři verze jednoho modulu: Component.ios.js (iOS), Component.android.js (Android) a Component.native.js(obě platformy). Při importu require('./Component') Resolver automaticky vybere správnou verzi v závislosti na cílové platformě sestavení. To umožňuje psát kód závislý na platformě bez podmíněných konstrukcí Platform.OS. Pořadí priority: název.platforma.js > název.native.js > název.js. Přípona .native.js se používá pro společný kód fungující na obou platformách, ale nekompatibilní s webem. Přípony .ios.js a .android.js slouží k implementaci specifických funkcí — navigace, gesta, práce se souborovým systémem. Metro podporuje vlastní přípony prostřednictvím konfigurace resolver.sourceExts.

// metro.config.js — nastavení sourceExts a 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 a Fast Refresh v Metro

Fast Refresh je mechanismus horkého načítání React Native implementovaný nad Metro. Když vývojář změní soubor, Metro znovu transpiluje pouze změněný modul a odešle aktualizaci do aplikace přes WebSocket. Fast Refresh aktualizuje rozhraní bez opětovného načítání celé aplikace a zachovává stav React komponent, pokud byl změněn pouze JSX nebo styly. Pokud byl změněn kód s hoky nebo stavem, Fast Refresh provede znovupřipojení pouze změněné komponenty. Metro podporuje dva režimy: Hot Module Replacement (HMR) pro výměnu modulů za běhu a Live Reload pro úplné znovunačtení aplikace při změně nativních modulů nebo konfigurace. Fast Refresh je ve výchozím nastavení zapnutý v React Native 0.76 a nevyžaduje další konfiguraci — stačí spustit npx react-native start.

Konfigurace Metro: metro.config.js

metro.config.js je konfigurační soubor Metro, umístěný v kořenu projektu React Native. V něm se konfiguruje: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) a watcher (watchFolders, healthCheck). Standardní konfigurace Metro se dědí z balíčku @react-native/metro-config (React Native 0.76+). U projektů s monorepozitářem přidejte watchFolders — to umožní Metro sledovat změny v balíčcích mimo kořen projektu. Pro konfiguraci sourceExts přidejte 'svg', 'png', 'gql' pro vlastní transformátory. Metro podporuje asynchronní konfigurace prostřednictvím async function — to je užitečné pro dynamické generování konfigurace na základě prostředí.

Optimalizace sestavení pomocí konfigurace

Optimalizace sestavení Metro začíná správnou konfigurací cache. Nastavte maxWorkers na počet CPU mínus 1. Pro distribuce použijte resetCache na CI. Minimalizujte sourceExts — další přípony zpomalují rozlišení modulů. U velkých projektů konfigurujte watchFolders pouze na potřebné adresáře. Metro podporuje Hermes bytecode minification, který poskytuje menší velikost bundle než standardní Terser — použijte minifierPath: 'metro-minify-terser'.

Hermes bundling: sestavování do bytecode

Metro podporuje režim sestavování přímo do Hermes bytecode — přeskočením fáze JavaScript AST. Při sestavování s HermesTransformer jsou moduly kompilovány do HBC (Hermes ByteCode) místo prostého JavaScriptu. To přináší: menší velikost bundle (o 30-40%), rychlejší spuštění aplikace (o 20-30%) a nižší spotřebu paměti. Pro aktivaci nastavte hermesCommand v metro.config.js a aktivujte příznak Hermes v build.gradle (Android) nebo Podfile (iOS). Sestavování Hermes bundle probíhá ve dvou fázích: nejprve Metro sestaví JavaScript bundle, poté Hermes CLI jej převede do HBC. Počínaje React Native 0.70 je Hermes výchozím enginem na Androidu, na iOS vyžaduje explicitní aktivaci.

Metro vs Webpack: srovnání přístupů

Rozdíl mezi Metro a Webpack je způsoben odlišnými cíli. Webpack je univerzální bundler pro web s obrovským ekosystémem pluginů a loaderů. Metro je specializovaný bundler pro React Native, kde prioritou je rychlost inkrementálního sestavení a správná funkce s nativními moduly. Webpack používá dlouhodobý graf modulů s inteligentním zneplatněním cache — to poskytuje rychlá opětovná sestavení na webu, ale vytváří problémy s platformovými rozšířeními. Metro neukládá graf do cache mezi sestaveními, ale vytváří ho pokaždé — to zjednodušuje zpracování platformových rozšíření a Haste modulů. Webpack podporuje dynamické importy s chunky, Metro také — prostřednictvím React.lazy() a Suspense, ale s omezením na jeden aktivní požadavek. Ekosystém Metro je výrazně menší: neexistuje náhrada za style-loader, css-loader, file-loader — tyto úlohy se řeší jinak v React Native.

Kdy zvolit Metro

Metro je jedinou správnou volbou pro projekty React Native. Webpack nepodporuje platform-aware resolution hned po vybalení a konfigurace React Native s Webpackem vyžaduje značné úsilí (haul bundler, expo web packager). Metro je integrováno do React Native CLI, je podporováno oficiálním týmem Meta a dostává aktualizace s každým vydáním React Native. U projektů React Native Web můžete použít Webpack pro webové sestavení, zatímco Metro zůstane pro mobilní bundle.