Metro: co to je, klíčové možnosti a princip fungování

Co je Metro?

Metro je open-source JavaScriptový bundler vytvořený týmem Meta pro React Native. Nahradil Packager z dřívějších verzí React Native a stal se standardním nástrojem pro sestavování pro tuto platformu. Metro není určeno pro vývoj webu: jeho architektura je zaměřena výhradně na mobilní aplikace běžící pod JavaScriptovými enginy JSC (JavaScriptCore) nebo Hermes.

Historie vzniku a pozicování

Metro se objevilo v roce 2018 jako náhrada za starý React Native Packager. Hlavním důvodem vzniku byla potřeba bundleru, který efektivně pracuje s miliony modulů ve velkých mobilních aplikacích. Na rozdíl od Webpacku Metro nepodporuje CSS, HTML ani obrázky jako moduly — tyto zdroje jsou zpracovávány samostatnými nástroji React Native. Facebook používá Metro pro sestavování své hlavní aplikace, která obsahuje přes 100 tisíc souborů.

Metro je distribuováno prostřednictvím npm jako balíček metro a instaluje se automaticky společně s React Native CLI. Verze Metro je vázaná na verzi React Native, takže aktualizace bundleru probíhá spolu s aktualizací platformy.

Jak funguje bundler Metro?

Metro na vstupu přijímá vstupní bod aplikace, vytváří graf závislostí, transformuje každý modul a serializuje výsledek do jednoho bundle. Proces prochází třemi fázemi: Resolve (rozlišování modulů), Transform (transformace) a Serialize (serializace).

Proces sestavení v Metro

// Příklad konfigurace Metro pro vlastní transformaci
const metroConfig = {
  transformer: {
    babelTransformerPath: require('metro-babel-transformer'),
    async transform({ src, filename, options }) {
      const result = await babelTransform({ src, filename, options });
      return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        dependencies: [],
      };
    },
  },
  serializer: {
    createModuleIdFactory() {
      let nextId = 0;
      const moduleIds = new Map();
      return ({ path }) => {
        if (!moduleIds.has(path)) {
          moduleIds.set(path, nextId++);
        }
        return moduleIds.get(path);
      };
    },
  },
};

Ve fázi Resolve Metro určuje umístění každého importovaného modulu, přičemž bere v úvahu aliasy a node_modules. Ve fázi Transform každý soubor prochází Babel transformátorem pro převod JSX, TypeScript a dalších rozšíření do čistého JavaScriptu. Závěrečná fáze Serialize shromažďuje všechny transformované moduly do jednoho nebo více bundle souborů.

Architektura Metro

Metro je postaveno na modulární architektuře, kde je každá fáze sestavení implementována jako samostatný komponent. To umožňuje nahrazovat standardní moduly vlastními bez změny jádra bundleru. Architektura Metro zahrnuje tři hlavní balíčky: metro, metro-config a metro-resolver.

Klíčové komponenty Metro

Metro Server — vývojový server, který se spouští příkazem npx react-native start. Obsluhuje požadavky na transformaci modulů v reálném čase a zajišťuje Fast Refresh. Module Store — mezipaměť, která ukládá transformované moduly v paměti pro urychlení opakovaných sestavení. Dependency Graph — graf závislostí, který se inkrementálně aktualizuje při změně souborů.

Watchman — sledovač souborů od Meta, který Metro používá k detekci změn v souborovém systému. Bez Watchman by Metro muselo při každé změně znovu prohledávat celou strukturu souborů, což výrazně zpomaluje vývoj. Instalace Watchman je povinná pro pohodlnou práci s Metro na projektech jakékoli velikosti.

Nastavení Metro v projektu React Native

Nastavení Metro se definuje v souboru metro.config.js v kořenu projektu. Typický soubor definuje další složky pro vyhledávání modulů, blokování pro vyloučení nepotřebných souborů a vlastní transformátory. V React Native 0.72+ se používá automatické rozpoznávání konfigurace, ale pro monorepozitáře je nastavení povinné.

Základní nastavení Metro pro React Native

// metro.config.js
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
    nodeModulesPaths: ['node_modules'],
    blockList: [/\.test\.js$/, /__tests__\/.*/],
    extraNodeModules: {
      'shared-components': path.resolve(__dirname, '../shared/src'),
    },
  },
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: { reserved: ['React', 'Component'] },
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

blockList vylučuje testovací soubory ze sestavení, čímž snižuje velikost bundle. nodeModulesPaths ukazuje na další cesty pro vyhledávání balíčků — kriticky důležité pro monorepozitáře. extraNodeModules vytváří aliasy pro sdílené balíčky používané v různých projektech monorepozitáře.

Optimalizace sestavení Metro

Metro poskytuje několik mechanismů pro optimalizaci velikosti bundle a rychlosti sestavení. Inline Requires — nejúčinnější technika, která přeměňuje importy na nejvyšší úRovni na lokální require uvnitř funkcí. RAM bundles umožňují inkrementální načítání modulů. Hermes kompiluje JavaScript do bajtkódu, čímž snižuje velikost aplikace o 20–30%.

Povolení Inline Requires a Hermes

// metro.config.js — optimalizace pro produkci
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// Pro povolení Hermes — v build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Pro iOS — v Podfile: :hermes_enabled => true

Pro diagnostiku velikosti bundle poskytuje Metro příznak --bundle-output s výstupem statistik. Použijte bundle-visualizer pro analýzu složení bundle a nalezení velkých modulů, které lze načítat líně. Pravidelná kontrola velikosti bundle by měla být součástí CI/CD pipeline projektu React Native.

Delta Bundles a inkrementální sestavení

Metro podporuje delta-bundly — mechanismus, při kterém po prvním úplném sestavení server odesílá pouze změny (delta) mezi starou a novou verzí bundle. To radikálně urychluje následná sestavení: čas aktualizace se snižuje z vteřin na desítky milisekund. Delta-bundly jsou zvláště účinné ve fázi vývoje, kdy vývojář často ukládá změny a znovu načítá aplikaci.

Pro povolení delta-bundlů v React Native se používá příznak --delta v příkazu npx react-native bundle. Na straně klienta jsou delta-bundly podporovány od React Native 0.64. V produkčních sestaveních se delta-bundly nepoužívají — místo nich se pro maximální výkon při spuštění používá plný bundle s Hermes bajtkódem. Toho je dosaženo proto, že nárůst rychlosti vývoje kompenzuje náklady prvního úplného sestavení.

Hermes a Metro: společná práce

Hermes — JavaScriptový engine vyvinutý Meta speciálně pro React Native. Metro generuje Hermes bajtkód během sestavení, což umožňuje aplikaci spouštět se bez nákladné kompilace JavaScriptu na zařízení. Pro povolení Hermes stačí přidat enableHermes: true do metro.config.js a nakonfigurovat build.gradle nebo Podfile. Hermes snižuje čas spuštění aplikace o 30–50% a velikost APK o 20–30% ve srovnání s JavaScriptCore.

Při použití Hermes je důležité pamatovat na omezení: engine nepodporuje Proxy, Reflect a některé možnosti ES6. Většina React Native aplikací tyto možnosti nepoužívá přímo, ale některé knihovny mohou způsobit konflikty. Před povolením Hermes zkontrolujte kompatibilitu všech závislostí projektu pomocí oficiálního kontrolního seznamu kompatibility. Metro se při aktivaci Hermes automaticky přepne do režimu generování bajtkódu.

Monitorování výkonu Metro

Pro sledování efektivity sestavení Metro použijte vestavěné metriky dostupné prostřednictvím Flipper — nástroje pro ladění React Native. Metro zveřejňuje události: bundle_request, transform, resolve s časem provedení každé fáze. Analýza těchto dat pomáHá identifikovat úzká místa: pokud fáze transform zabírá více než 70% času, problém je v Babel transformátoru. Zapněte protokolování Metro pomocí příznaku --verbose pro podrobnou diagnostiku.