Metro: Was es ist, Hauptfunktionen und Funktionsprinzip

Was ist Metro?

Metro ist ein Open-Source-JavaScript-Bundler, der vom Meta-Team für React Native entwickelt wurde. Er ersetzte den Packager aus früheren Versionen von React Native und wurde zum Standard-Build-Tool für diese Plattform. Metro ist nicht für die Webentwicklung konzipiert: Seine Architektur ist ausschließlich auf mobile Anwendungen ausgerichtet, die auf JSC (JavaScriptCore) oder Hermes JavaScript-Engines laufen.

Entstehungsgeschichte und Positionierung

Metro erschien 2018 als Ersatz für den alten React Native Packager. Der Hauptgrund für seine Entwicklung war die Notwendigkeit eines Bundlers, der effizient mit Millionen von Modulen in großen mobilen Anwendungen arbeitet. Im Gegensatz zu Webpack unterstützt Metro CSS, HTML oder Bilder nicht als Module — diese Ressourcen werden von separaten React Native-Tools verarbeitet. Facebook verwendet Metro zum Erstellen seiner Hauptanwendung, die über 100.000 Dateien enthält.

Metro wird über npm als Paket metro vertrieben und automatisch mit React Native CLI installiert. Die Metro-Version ist an die React Native-Version gebunden, daher erfolgt die Aktualisierung des Bundlers zusammen mit der Plattformaktualisierung.

Wie funktioniert der Metro Bundler?

Metro nimmt den Einstiegspunkt der Anwendung als Eingabe, erstellt einen Abhängigkeitsgraphen, transformiert jedes Modul und serialisiert das Ergebnis in ein einziges Bundle. Der Prozess durchläuft drei Phasen: Resolve (Modulauflösung), Transform (Transformation) und Serialize (Serialisierung).

Build-Prozess in Metro

// Beispiel einer Metro-Konfiguration für benutzerdefinierte Transformation
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 der Resolve-Phase bestimmt Metro den Speicherort jedes importierten Moduls unter Berücksichtigung von Aliasen und node_modules. In der Transform-Phase durchläuft jede Datei einen Babel-Transformer, um JSX, TypeScript und andere Erweiterungen in reines JavaScript zu konvertieren. Die letzte Serialize-Phase sammelt alle transformierten Module in einer oder mehreren Bundle-Dateien.

Metro-Architektur

Metro basiert auf einer modularen Architektur, bei der jede Build-Stufe als separate Komponente implementiert ist. Dadurch können Standardmodule durch benutzerdefinierte Module ersetzt werden, ohne den Bundle-Kern zu ändern. Die Metro-Architektur umfasst drei Hauptpakete: metro, metro-config und metro-resolver.

Wichtige Metro-Komponenten

Metro Server — ein Entwicklungsserver, der mit dem Befehl npx react-native start gestartet wird. Er bedient Echtzeit-Modultransformationsanfragen und ermöglicht Fast Refresh. Module Store — ein Cache, der transformierte Module im Speicher speichert, um Neuerstellungen zu beschleunigen. Dependency Graph — ein Abhängigkeitsgraph, der bei Dateiänderungen inkrementell aktualisiert wird.

Watchman — ein Datei-Überwacher von Meta, den Metro zur Erkennung von Änderungen im Dateisystem verwendet. Ohne Watchman muss Metro bei jeder Änderung die gesamte Dateistruktur erneut scannen, was die Entwicklung erheblich verlangsamt. Die Installation von Watchman ist für komfortables Arbeiten mit Metro in Projekten jeder Größe obligatorisch.

Metro-Konfiguration in einem React Native-Projekt

Die Konfiguration von Metro wird in der Datei metro.config.js im Projektstamm festgelegt. Eine typische Datei definiert zusätzliche Ordner für die Modulsuche, Blocklisten zum Ausschließen unnötiger Dateien und benutzerdefinierte Transformatoren. In React Native 0.72+ wird die automatische Konfigurationserkennung verwendet, aber für Monorepos ist die Konfiguration obligatorisch.

Basis-Metro-Konfiguration für 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 schließt Testdateien aus dem Build aus und reduziert so die Bundle-Größe. nodeModulesPaths gibt zusätzliche Pfade für die Paketsuche an — kritisch für Monorepos. extraNodeModules erstellt Aliase für gemeinsame Pakete, die in verschiedenen Projekten eines Monorepos verwendet werden.

Metro-Build-Optimierung

Metro bietet mehrere Mechanismen zur Optimierung der Bundle-Größe und Build-Geschwindigkeit. Inline Requires — die effektivste Technik, die Importe auf oberster Ebene in lokale require-Aufrufe innerhalb von Funktionen umwandelt. RAM bundles ermöglichen das inkrementelle Laden von Modulen. Hermes kompiliert JavaScript in Bytecode und reduziert so die Anwendungsgröße um 20–30 %.

Aktivieren von Inline Requires und Hermes

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

// Zum Aktivieren von Hermes — in build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Für iOS — in Podfile: :hermes_enabled => true

Zur Diagnose der Bundle-Größe bietet Metro das Flag --bundle-output mit Statistikausgabe. Verwenden Sie bundle-visualizer, um die Bundle-Zusammensetzung zu analysieren und große Module zu finden, die nachgeladen werden können. Die regelmäßige Überprüfung der Bundle-Größe sollte Teil der CI/CD-Pipeline des React Native-Projekts sein.

Delta-Bundles und inkrementeller Build

Metro unterstützt Delta-Bundles — einen Mechanismus, bei dem der Server nach dem ersten vollständigen Build nur die Änderungen (Delta) zwischen der alten und neuen Bundle-Version sendet. Dies beschleunigt nachfolgende Builds drastisch: Die Aktualisierungszeit sinkt von Sekunden auf zig Millisekunden. Delta-Bundles sind besonders in der Entwicklungsphase effektiv, wenn der Entwickler häufig Änderungen speichert und die Anwendung neu lädt.

Zum Aktivieren von Delta-Bundles in React Native wird das Flag --delta im Befehl npx react-native bundle verwendet. Auf Client-Seite werden Delta-Bundles ab React Native 0.64 unterstützt. In Produktions-Builds werden keine Delta-Bundles verwendet — stattdessen wird ein vollständiges Bundle mit Hermes-Bytecode für maximale Startleistung verwendet. Dies wird dadurch erreicht, dass der Geschwindigkeitsgewinn bei der Entwicklung die Kosten des ersten vollständigen Builds ausgleicht.

Hermes und Metro: Zusammenarbeit

Hermes ist eine JavaScript-Engine, die von Meta speziell für React Native entwickelt wurde. Metro generiert zur Build-Zeit Hermes-Bytecode, sodass die Anwendung ohne teure JavaScript-Kompilierung auf dem Gerät gestartet werden kann. Zum Aktivieren von Hermes fügen Sie einfach enableHermes: true in metro.config.js hinzu und konfigurieren build.gradle oder Podfile. Hermes reduziert die Startzeit der Anwendung um 30–50 % und die APK-Größe um 20–30 % im Vergleich zu JavaScriptCore.

Bei Verwendung von Hermes ist es wichtig, die Einschränkungen zu beachten: Die Engine unterstützt Proxy, Reflect und einige ES6-Funktionen nicht. Die meisten React Native-Anwendungen verwenden diese Funktionen nicht direkt, aber einige Bibliotheken können Konflikte verursachen. Überprüfen Sie vor der Aktivierung von Hermes die Kompatibilität aller Projektabhängigkeiten anhand der offiziellen Kompatibilitäts-Checkliste. Metro wechselt automatisch in den Bytecode-Generierungsmodus, wenn Hermes aktiviert wird.

Metro-Leistungsüberwachung

Zur Verfolgung der Metro-Build-Effizienz verwenden Sie die integrierten Metriken, die über Flipper — das React Native-Debugging-Tool — verfügbar sind. Metro veröffentlicht Ereignisse: bundle_request, transform, resolve mit Ausführungszeit für jede Stufe. Die Analyse dieser Daten hilft, Engpässe zu identifizieren: Wenn die Transform-Phase mehr als 70 % der Zeit beansprucht, liegt das Problem im Babel-Transformer. Aktivieren Sie die Metro-Protokollierung über das Flag --verbose für eine detaillierte Diagnose.