Metro: mi ez, főbb képességei és működési elve

Mi az a Metro?

Metro egy nyílt forráskódú JavaScript bundler, amelyet a Meta csapat készített a React Native számára. Felváltotta a Packager-t a React Native korábbi verzióiból, és a platform szabványos fordítóeszközvé vált. A Metro nem webes fejlesztésre szolgál: architektúrája kizárólag a JSC (JavaScriptCore) vagy Hermes JavaScript motorok alatt futó mobilalkalmazásokra összpontosít.

Létrejöttének története és pozicionálása

Metro 2018-ban jelent meg a régi React Native Packager helyettesítőjeként. A létrehozásának fő oka egy olyan bundler iránti igény volt, amely hatékonyan működik millió modullal nagy mobilalkalmazásokban. A Webpack-kel ellentétben a Metro nem támogatja a CSS, HTML vagy képek modulkénti használatát — ezeket az erőforrásokat külön React Native eszközök dolgozzák fel. A Facebook a Metro-t használja fő alkalmazásának összeállításához, amely több mint 100 ezer fájlt tartalmaz.

A Metro npm-en keresztül, metro csomagként terjed, és automatikusan települ a React Native CLI-vel együtt. A Metro verziója a React Native verziójához van kötve, így a bundler frissítése a platform frissítésével együtt történik.

Hogyan működik a Metro bundler?

Metro a bemeneten fogadja az alkalmazás belépési pontját, függőségi gráfot épít, transzformálja az egyes modulokat, és szerializálja az eredményt egyetlen bundle-ba. A folyamat három fázison megy keresztül: Resolve (modulok feloldása), Transform (transzformáció) és Serialize (szerializálás).

A fordítás folyamata a Metro-ban

// Példa Metro konfigurációra egyéni transzformációhoz
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);
      };
    },
  },
};

A Resolve fázisban a Metro meghatározza az egyes importált modulok helyét, figyelembe véve az aliasokat és a node_modules-t. A Transform fázisban minden fájl átmegy egy Babel-transzformerren a JSX, TypeScript és egyéb kiterjesztések tiszta JavaScriptté alakításához. A végső Serialize fázis összegyűjti az összes transzformált modult egy vagy több bundle fájlba.

A Metro architektúrája

Metro moduláris architektúrára épül, ahol a fordítás minden szakasza külön komponensként van megvalósítva. Ez lehetővé teszi a szabványos modulok egyéni modulokkal történő cseréjét a bundler magjának megváltoztatása nélkül. A Metro architektúrája három fő csomagot foglal magában: metro, metro-config és metro-resolver.

A Metro fő összetevői

Metro Server — a fejlesztői szerver, amely a npx react-native start paranccsal indul. Valós időben szolgálja ki a modultranszformációs kéréseket, biztosítva a Fast Refresh-t. Module Store — gyorsítótár, amely a transzformált modulokat memóriában tárolja az ismételt fordítások gyorsításához. Dependency Graph — függőségi gráf, amely a fájlok módosításakor növekményesen frissül.

Watchman — fájlmegfigyelő a Meta-tól, amelyet a Metro a fájlrendszer változásainak érzékelésére használ. Watchman nélkül a Metro-nak minden változáskor újra kellene pésztáznia a teljes fájlszerkezetet, ami jelentősen lelassítja a fejlesztést. A Watchman telepítése kötelező a kényelmes Metro-val való munkához bármilyen méretű projekten.

A Metro konfigurálása React Native projektben

Konfiguráció A Metro-t a projekt gyökérben található metro.config.js fájlban lehet megadni. Egy tipikus fájl további mappákat határoz meg a modulok kereséséhez, blokkolásokat a felesleges fájlok kizárásához és egyéni transzformereket. A React Native 0.72+ verzióban automatikus konfigurációfelismerés használatos, de a monorepozitóriumoknál a konfiguráció kötelező.

Alapvető Metro konfiguráció React Native számára

// 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 kizárja a tesztfájlokat a fordításból, csökkentve a bundle méretét. nodeModulesPaths további útvonalakat jelöl meg a csomagok kereséséhez — kritikus a monorepozitóriumok számára. extraNodeModules aliasokat hoz létre a közös csomagokhoz, amelyeket a monorepozitórium különböző projektjeiben használnak.

A Metro fordítás optimalizálása

Metro számos mechanizmust kínál a bundle méretének és a fordítási sebességnek az optimalizálásához. Inline Requires — a leghatékonyabb technika, amely a legfelső szintű importálásokat lokális require-vé alakítja a függvényeken belül. RAM bundles lehetővé teszik a modulok növekményes betöltését. Hermes bájtkóddé fordítja a JavaScriptet, 20–30%-kal csökkentve az alkalmazás méretét.

Az Inline Requires és a Hermes bekapcsolása

// metro.config.js — optimalizálás éles környezetre
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// A Hermes bekapcsolásához — a build.gradle-ben (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// iOS esetén — a Podfile-ban: :hermes_enabled => true

A bundle méretének diagnosztizálásához a Metro a --bundle-output kapcsolót kínálja statisztikai kimenettel. Használja a bundle-visualizer-t a bundle összetételének elemzéséhez és a nagy modulok megtalálásához, amelyek lustán tölthetők be. A bundle méretének rendszeres ellenőrzésének részét kell képeznie a React Native projekt CI/CD csœvezetékének.

Delta Bundles és növekményes fordítás

Metro támogatja a delta-bundle-okat — egy olyan mechanizmust, ahol az első teljes fordítás után a szerver csak a változásokat (delta) küldi el a régi és új bundle verziók között. Ez drasztikusan felgyorsítja a későbbi fordításokat: a frissítési idő másodpercekről tízes milliszekundumokra csökken. A delta-bundle-ok különösen hatékonyak a fejlesztési szakaszban, amikor a fejlesztő gyakran menti a változásokat és újratölti az alkalmazást.

A delta-bundle-ok bekapcsolásához a React Native-ban a --delta kapcsolót használják a npx react-native bundle parancsban. Az üfél oldalon a delta-bundle-ok a React Native 0.64-től kezdve támogatottak. Éles fordításoknál a delta-bundle-ok nem alkalmazhatók — helyettük teljes bundle-t használnak Hermes bájtkóddal a maximális indítási teljesítmény érdekében. Ez azért érhető el, mert a fejlesztési sebesség növekedése kompenzálja az első teljes fordítás költségeit.

A Hermes és a Metro: együttműködés

Hermes — JavaScript motor, amelyet a Meta kifejezetten a React Native számára fejlesztett ki. A Metro a fordítási szakaszban Hermes bájtkódot generál, ami lehetővé teszi az alkalmazás számára, hogy a készüléken végzett költséges JavaScript fordítás nélkül induljon. A Hermes bekapcsolásához elegendő hozzáadni az enableHermes: true beállítást a metro.config.js-ben, és konfigurálni a build.gradle-t vagy a Podfile-t. A Hermes 30–50%-kal csökkenti az alkalmazás indítási idejét és 20–30%-kal az APK méretét a JavaScriptCore-hoz képest.

A Hermes használatakor fontos emlékezni a korlátozásokra: a motor nem támogatja a Proxy-t, a Reflect-et és néhány ES6 képességet. A legtöbb React Native alkalmazás nem használja ezeket a képességeket közvetlenül, de néhány könyvtár ütközéseket okozhat. A Hermes bekapcsolása előtt ellenőrizze az összes projektfüggőség kompatibilitását az hivatalos kompatibilitási ellenőrzőlistán. A Metro automatikusan átvált bájtkód generálási módba a Hermes aktiválásakor.

A Metro teljesítményének figyelése

A Metro fordítás hatékonyságának nyomon követéséhez használja a Flipper — a React Native hibakereső eszköz — által elérhető beépített metrikákat. A Metro eseményeket tesz közzé: bundle_request, transform, resolve az egyes szakaszok végrehajtási idejével. Ezen adatok elemzése segít azonosítani a szűk keresztmetszeteket: ha a transform fázis az idő több mint 70%-át veszi igénybe, a probléma a Babel-transzformerben van. Kapcsolja be a Metro naplózását a --verbose kapcsolóval a részletes diagnosztikához.