Metro: ce este, capacități cheie și principiul de funcționare

Ce este Metro?

Metro este un bundler JavaScript open-source, creat de echipa Meta pentru React Native. Acesta l-a înlocuit pe Packager din versiunile timpurii ale React Native și a devenit instrumentul standard de compilare pentru această platformă. Metro nu este destinat dezvoltării web: arhitectura sa este orientată exclusiv către aplicațiile mobile care rulează sub motoarele JavaScript JSC (JavaScriptCore) sau Hermes.

Istoricul creării și poziționarea

Metro a apărut în 2018 ca înlocuitor pentru vechiul React Native Packager. Motivul principal al creării a fost necesitatea unui bundler care să lucreze eficient cu milioane de module în aplicații mobile mari. Spre deosebire de Webpack, Metro nu suportă CSS, HTML sau imagini ca module — aceste resurse sunt procesate de instrumente separate React Native. Facebook folosește Metro pentru construirea aplicației sale principale, care conține peste 100 de mii de fișiere.

Metro este distribuit prin npm ca pachet metro și se instalează automat odată cu React Native CLI. Versiunea Metro este legată de versiunea React Native, deci actualizarea bundlerului are loc odată cu actualizarea platformei.

Cum funcționează bundlerul Metro?

Metro primește la intrare punctul de intrare al aplicației, construiește graful de dependențe, transformă fiecare modul și serializează rezultatul într-un singur bundle. Procesul parcurge trei faze: Resolve (rezolvarea modulelor), Transform (transformarea) și Serialize (serializarea).

Procesul de compilare în Metro

// Exemplu de configurare Metro pentru transformare personalizată
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);
      };
    },
  },
};

În faza Resolve, Metro determină locația fiecărui modul importat, ținând cont de aliasuri și node_modules. În faza Transform, fiecare fișier trece printr-un transformator Babel pentru conversia JSX, TypeScript și a altor extensii în JavaScript pur. Faza finală Serialize colectează toate modulele transformate într-unul sau mai multe fișiere bundle.

Arhitectura Metro

Metro este construit pe o arhitectură modulară, unde fiecare etapă de compilare este implementată ca o componentă separată. Acest lucru permite înlocuirea modulelor standard cu unele personalizate fără a modifica nucleul bundlerului. Arhitectura Metro include trei pachete principale: metro, metro-config și metro-resolver.

Componentele cheie ale Metro

Metro Server — serverul de dezvoltare care se lansează cu comanda npx react-native start. Acesta servește cererile de transformare a modulelor în timp real, asigurând Fast Refresh. Module Store — memoria cache care stochează modulele transformate în memorie pentru a accelera compilările repetate. Dependency Graph — graful de dependențe care se actualizează incremental la modificarea fișierelor.

Watchman — observatorul de fișiere de la Meta, pe care Metro îl folosește pentru a detecta modificările în sistemul de fișiere. Fără Watchman, Metro ar trebui să rescaneze întreaga structură de fișiere la fiecare modificare, ceea ce încetinește semnificativ dezvoltarea. Instalarea Watchman este obligatorie pentru lucrul confortabil cu Metro pe proiecte de orice dimensiune.

Configurarea Metro în proiectul React Native

Configurarea Metro se face în fișierul metro.config.js din rădăcina proiectului. Un fișier tipic definește foldere suplimentare pentru căutarea modulelor, blocaje pentru excluderea fișierelor inutile și transformatoare personalizate. În React Native 0.72+ se utilizează detectarea automată a configurării, dar pentru monorepozitorii configurarea este obligatorie.

Configurarea de bază Metro pentru 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 exclude fișierele de test din compilare, reducând dimensiunea bundle-ului. nodeModulesPaths indică căi suplimentare pentru căutarea pachetelor — critic pentru monorepozitorii. extraNodeModules creează aliasuri pentru pachetele comune utilizate în diferite proiecte ale monorepozitoriului.

Optimizarea compilării Metro

Metro oferă mai multe mecanisme pentru optimizarea dimensiunii bundle-ului și a vitezei de compilare. Inline Requires — cea mai eficientă tehnică, care transformă importurile de la nivel superior în require-uri locale în interiorul funcțiilor. RAM bundles permit încărcarea incrementală a modulelor. Hermes compilează JavaScript în bytecode, reducând dimensiunea aplicației cu 20–30%.

Activarea Inline Requires și Hermes

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

// Pentru activarea Hermes — în build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Pentru iOS — în Podfile: :hermes_enabled => true

Pentru diagnosticarea dimensiunii bundle-ului, Metro oferă flag-ul --bundle-output cu ieșire de statistici. Folosește bundle-visualizer pentru analiza compoziției bundle-ului și găsirea modulelor mari care pot fi încărcate leneș. Verificarea regulată a dimensiunii bundle-ului ar trebui să fie parte a pipeline-ului CI/CD al proiectului React Native.

Delta Bundles și compilarea incrementală

Metro suportă delta-bundle-uri — un mecanism prin care, după prima compilare completă, serverul trimite doar modificările (delta) între versiunile veche și nouă ale bundle-ului. Acest lucru accelerează radical compilările ulterioare: timpul de actualizare se reduce de la secunde la zeci de milisecunde. Delta-bundle-urile sunt deosebit de eficiente în faza de dezvoltare, când dezvoltatorul salvează frecvent modificări și reîncarcă aplicația.

Pentru activarea delta-bundle-urilor în React Native se folosește flag-ul --delta în comanda npx react-native bundle. De partea clientului, delta-bundle-urile sunt suportate începând cu React Native 0.64. În compilările de producție, delta-bundle-urile nu se aplică — în locul lor se utilizează un bundle complet cu bytecode Hermes pentru performanță maximă la pornire. Acest lucru se realizează deoarece creșterea vitezei de dezvoltare compensează costurile primei compilări complete.

Hermes și Metro: lucrul împreună

Hermes — un motor JavaScript dezvoltat de Meta special pentru React Native. Metro generează bytecode Hermes în faza de compilare, ceea ce permite aplicației să pornească fără compilarea costisitoare a JavaScript pe dispozitiv. Pentru activarea Hermes este suficient să adăugați enableHermes: true în metro.config.js și să configurați build.gradle sau Podfile. Hermes reduce timpul de pornire a aplicației cu 30–50% și dimensiunea APK cu 20–30% comparativ cu JavaScriptCore.

Când utilizați Hermes, este important să țineți cont de limitări: motorul nu suportă Proxy, Reflect și unele capabilități ES6. Majoritatea aplicațiilor React Native nu folosesc aceste capabilități direct, dar unele biblioteci pot intra în conflict. Înainte de activarea Hermes, verificați compatibilitatea tuturor dependențelor proiectului prin lista oficială de compatibilitate. Metro comută automat în modul de generare a bytecode-ului la activarea lui Hermes.

Monitorizarea performanței Metro

Pentru urmărirea eficienței compilării Metro, utilizați metricile încorporate disponibile prin Flipper — instrumentul de depanare React Native. Metro publică evenimente: bundle_request, transform, resolve cu timpul de execuție al fiecărei etape. Analiza acestor date ajută la identificarea blocajelor: dacă faza transform ocupă mai mult de 70% din timp, problema este în transformatorul Babel. Activați logurile Metro prin flag-ul --verbose pentru o diagnosticare detaliată.