Metro: wat het is, belangrijkste mogelijkheden en werkingsprincipe

Wat is Metro?

Metro is een open-source JavaScript-bundler, gemaakt door het Meta-team voor React Native. Het verving de Packager uit eerdere versies van React Native en werd het standaard buildinstrument voor dit platform. Metro is niet bedoeld voor webontwikkeling: de architectuur is uitsluitend gericht op mobiele applicaties die draaien onder de JavaScript-engines JSC (JavaScriptCore) of Hermes.

Geschiedenis en positionering

Metro verscheen in 2018 als vervanging van de oude React Native Packager. De belangrijkste reden voor de creatie was de behoefte aan een bundler die efficiënt werkt met miljoenen modules in grote mobiele applicaties. In tegenstelling tot Webpack ondersteunt Metro geen CSS, HTML of afbeeldingen als modules — deze bronnen worden verwerkt door afzonderlijke React Native-tools. Facebook gebruikt Metro voor het bouwen van zijn hoofdapplicatie, die meer dan 100.000 bestanden bevat.

Metro wordt via npm verspreid als pakket metro en wordt automatisch geïnstalleerd samen met React Native CLI. De versie van Metro is gekoppeld aan de versie van React Native, dus het updaten van de bundler gebeurt samen met het updaten van het platform.

Hoe werkt de Metro bundler?

Metro ontvangt het ingangspunt van de applicatie, bouwt een afhankelijkheidsgraaf, transformeert elke module en serialiseert het resultaat in één bundle. Het proces doorloopt drie fasen: Resolve (modules oplossen), Transform (transformatie) en Serialize (serialisatie).

Buildproces in Metro

// Voorbeeld van Metro-configuratie voor aangepaste transformatie
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);
      };
    },
  },
};

In de Resolve-fase bepaalt Metro de locatie van elke geïmporteerde module, rekening houdend met aliassen en node_modules. In de Transform-fase gaat elk bestand door een Babel-transformer voor de conversie van JSX, TypeScript en andere extensies naar zuivere JavaScript. De laatste Serialize-fase verzamelt alle getransformeerde modules in één of meerdere bundle-bestanden.

Metro architectuur

Metro is gebouwd op een modulaire architectuur, waarbij elke buildfase is geïmplementeerd als een aparte component. Hierdoor kunnen standaardmodules worden vervangen door aangepaste modules zonder de kern van de bundler te wijzigen. De architectuur van Metro omvat drie hoofd-pakketten: metro, metro-config en metro-resolver.

Belangrijkste componenten van Metro

Metro Server — de ontwikkelserver die wordt gestart met het commando npx react-native start. Het bedient verzoeken voor moduletransformatie in real-time en zorgt voor Fast Refresh. Module Store — cache die getransformeerde modules in het geheugen opslaat om herhaalde builds te versnellen. Dependency Graph — de afhankelijkheidsgraaf die incrementeel wordt bijgewerkt bij bestandswijzigingen.

Watchman — een bestandswijzer van Meta die Metro gebruikt om wijzigingen in het bestandssysteem te detecteren. Zonder Watchman moet Metro bij elke wijziging de hele bestandsstructuur opnieuw scannen, wat de ontwikkeling aanzienlijk vertraagt. Installatie van Watchman is verplicht voor comfortabel werken met Metro op projecten van elke omvang.

Metro configureren in een React Native project

Configuratie van Metro wordt ingesteld in het bestand metro.config.js in de hoofdmap van het project. Een typisch bestand definieert extra mappen voor het zoeken van modules, blokkades voor het uitsluiten van onnodige bestanden en aangepaste transformators. In React Native 0.72+ wordt automatische detectie van configuratie gebruikt, maar voor monorepositories is configuratie verplicht.

Basisconfiguratie van Metro voor 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 sluit testbestanden uit van de build, waardoor de bundelgrootte afneemt. nodeModulesPaths wijst extra paden aan voor het zoeken van pakketten — cruciaal voor monorepositories. extraNodeModules creëert aliassen voor gedeelde pakketten die worden gebruikt in verschillende projecten van de monorepository.

Metro build optimaliseren

Metro biedt verschillende mechanismen voor het optimaliseren van de bundelgrootte en buildsnelheid. Inline Requires — de meest effectieve techniek, die imports op het hoogste niveau omzet in lokale require's binnen functies. RAM bundles maken incrementeel laden van modules mogelijk. Hermes compileert JavaScript naar bytecode, waardoor de applicatiegrootte met 20–30% afneemt.

Inline Requires en Hermes inschakelen

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

// Om Hermes in te schakelen — in build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Voor iOS — in Podfile: :hermes_enabled => true

Voor diagnostiek van de bundelgrootte biedt Metro de vlag --bundle-output met statistische uitvoer. Gebruik bundle-visualizer voor analyse van de bundelsamenstelling en het vinden van grote modules die lui kunnen worden geladen. Regelmatige controle van de bundelgrootte moet onderdeel zijn van de CI/CD-pijplijn van een React Native-project.

Delta Bundles en incrementele build

Metro ondersteunt delta-bundles — een mechanisme waarbij de server na de eerste volledige build alleen de wijzigingen (delta) tussen de oude en nieuwe versie van de bundle stuurt. Dit versnelt volgende builds drastisch: de update-tijd wordt teruggebracht van seconden naar tientallen milliseconden. Delta-bundles zijn vooral effectief in de ontwikkelingsfase, wanneer de ontwikkelaar vaak wijzigingen opslaat en de applicatie herlaadt.

Om delta-bundles in React Native in te schakelen, wordt de vlag --delta gebruikt in het commando npx react-native bundle. Aan de clientkant worden delta-bundles ondersteund vanaf React Native 0.64. In productie-builds worden delta-bundles niet toegepast — in plaats daarvan wordt een volledige bundle met Hermes-bytecode gebruikt voor maximale opstartprestaties. Dit wordt bereikt doordat de toename in ontwikkelsnelheid de kosten van de eerste volledige build compenseert.

Hermes en Metro: samenwerken

Hermes — een JavaScript-engine ontwikkeld door Meta speciaal voor React Native. Metro genereert Hermes-bytecode tijdens de buildfase, waardoor de applicatie kan opstarten zonder dure JavaScript-compilatie op het apparaat. Om Hermes in te schakelen, voegt u enableHermes: true toe aan metro.config.js en configureert u build.gradle of Podfile. Hermes vermindert de opstarttijd van de applicatie met 30–50% en verkleint de APK-grootte met 20–30% in vergelijking met JavaScriptCore.

Bij gebruik van Hermes is het belangrijk om rekening te houden met beperkingen: de engine ondersteunt geen Proxy, Reflect en sommige ES6-mogelijkheden. De meeste React Native-applicaties gebruiken deze mogelijkheden niet direct, maar sommige bibliotheken kunnen conflicten veroorzaken. Controleer vóór het inschakelen van Hermes de compatibiliteit van alle projectafhankelijkheden via de officiële compatibiliteitslijst. Metro schakelt automatisch over naar de modus voor het genereren van bytecode bij activering van Hermes.

Metro prestatiebewaking

Voor het volgen van de efficiëntie van Metro-builds gebruikt u ingebouwde metrieken die beschikbaar zijn via Flipper — de debugtool voor React Native. Metro publiceert gebeurtenissen: bundle_request, transform, resolve met de uitvoeringstijd van elke fase. Analyse van deze gegevens helpt knelpunten te identificeren: als de transform-fase meer dan 70% van de tijd in beslag neemt, ligt het probleem bij de Babel-transformer. Schakel Metro-logboeken in via de vlag --verbose voor gedetailleerde diagnostiek.