Metro Bundler: Was es ist, Projektbündelung und Arbeitsprinzip

Was ist Metro Bundler

Metro Bundler ist ein quelloffener JavaScript-Bündler, der von Meta für React Native entwickelt und standardmäßig in allen Framework-Projekten verwendet wird. Die Aufgabe von Metro besteht darin, den JavaScript-Code des Projekts zusammen mit den Abhängigkeiten zu nehmen und in ein oder mehrere Bündel zu packen, die auf dem Gerät ausgeführt werden. Im Gegensatz zu universellen Bündlern (Webpack, Rollup, Parcel) ist Metro für die Besonderheiten der mobilen Entwicklung optimiert: minimale Build-Zeit, inkrementelle Aktualisierungen während der Entwicklung und korrekte Handhabung von Plattformmodulen (Objective-C-, Swift-, Java-, Kotlin-Nativmodule). Metro wird als Teil der React Native CLI ausgeliefert und erfordert keine separate Installation. Ab React Native 0.72 unterstützt Metro Version 0.80+ die parallele Transpilation von Modulen, was Builds auf Mehrkernprozessoren um bis zu 40% beschleunigt.

Metro-Architektur: Resolver, Transformer und Bundler

Die Architektur von Metro ist in drei unabhängige Komponenten unterteilt: Resolver, Transformer und Bundler. Der Resolver ist für die Suche und Auflösung von Modulen zuständig — er liest import/require-Ausdrücke, findet die entsprechenden Dateien unter Berücksichtigung von Plattformerweiterungen und gibt absolute Pfade zurück. Der Transformer führt die Transpilation durch: Er wendet Babel mit Presets und Plugins an und wandelt JSX, TypeScript oder Flow in reines JavaScript um. Der Bundler ist die letzte Stufe: Er nimmt den Abhängigkeitsgraphen vom Resolver und die transformierten Dateien vom Transformer entgegen und serialisiert sie in ein oder mehrere Bündel (Modulbündel). Die Aufteilung in drei Schritte ermöglicht es Metro, die Ergebnisse jeder Stufe zwischenzuspeichern: Wenn sich nur eine Datei geändert hat, können Resolver und Bundler den Cache für die übrigen Module nutzen, was im Entwicklungsmodus eine bis zu 10-fache Steigerung der Build-Geschwindigkeit ermöglicht.

Resolver: Modulauflösung und plattformbewusste Suche

Der Resolver in Metro implementiert einen Modulauflösungsalgorithmus, der teilweise mit der Node.js-Modulauflösung kompatibel ist. Der Hauptunterschied zu Node.js ist die Unterstützung von Plattformerweiterungen: require(‘./Component’) sucht in der angegebenen Prioritätsreihenfolge nach Component.native.js, Component.ios.js, Component.android.js. Der Resolver unterstützt auch das package.json-Feld “react-native” zum Zuordnen von Modulen zu alternativen Implementierungen — dies ist der Standardmechanismus für Bibliotheken mit plattformspezifischem Code. Wenn eine Datei nicht gefunden wird, löst der Resolver einen Fehler mit dem vollständigen Suchstack aus.

Transformer: Babel und Transpilation

Der Transformer innerhalb von Metro verwendet Babel mit dem Preset metro-react-native-babel-preset. Die Standardkonfiguration umfasst: Umwandlung von JSX in React.createElement, TypeScript-Unterstützung (Typentfernung), Flow-Unterstützung und Polyfills für moderne JavaScript-Standards (async/await, optional chaining, nullish coalescing). Der Transformer arbeitet im parallelen Modus: Jedes Modul wird unabhängig transpiliert, wobei ein Pool von Worker-Prozessen verwendet wird (standardmäßig entspricht die Anzahl der CPU-Anzahl). Ab Metro 0.80 wird Granular Transformer Cache unterstützt — Cache-Invalidierung auf einzelner Dateiebene.

Plattformspezifische Erweiterungen in Metro

Eine der wichtigsten Funktionen von Metro ist die Unterstützung von Plattform-Dateierweiterungen. Ein React Native-Projekt kann drei Versionen desselben Moduls enthalten: Component.ios.js (iOS), Component.android.js (Android) und Component.native.js (beide Plattformen). Beim Importieren von require(‘./Component’) wählt der Resolver automatisch die richtige Version in Abhängigkeit von der Zielplattform aus. Dies ermöglicht das Schreiben von plattformabhängigem Code ohne bedingte Platform.OS-Konstrukte. Prioritätsreihenfolge: name.platform.js > name.native.js > name.js. Die Erweiterung .native.js wird für gemeinsamen Code verwendet, der auf beiden Plattformen funktioniert, aber nicht mit dem Web kompatibel ist. Die Erweiterungen .ios.js und .android.js dienen zur Implementierung spezifischer Funktionen — Navigation, Gesten, Dateisystemoperationen. Metro unterstützt benutzerdefinierte Erweiterungen über die Konfiguration resolver.sourceExts.

// metro.config.js — sourceExts- und watchFolders-Setup
const config = {
  resolver: {
    sourceExts: ['jsx', 'js', 'tsx', 'ts', 'json'],
    platformExtensions: ['ios', 'android', 'native'],
  },
  transformer: {
    babelTransformerPath: require('metro-react-native-babel-transformer'),
  },
  watchFolders: [path.resolve('../shared')],
};

Hot Reload und Fast Refresh in Metro

Fast Refresh ist ein Hot-Reload-Mechanismus für React Native, der auf Metro aufbaut. Wenn ein Entwickler eine Datei ändert, transpiliert Metro nur das geänderte Modul neu und sendet das Update über WebSocket an die App. Fast Refresh aktualisiert die Benutzeroberfläche, ohne die gesamte Anwendung neu zu laden, und behält den React-Komponentenstatus bei, wenn nur JSX oder Styles geändert wurden. Wenn Code mit Hooks oder Status geändert wird, mountet Fast Refresh nur die geänderte Komponente neu. Metro unterstützt zwei Modi: Hot Module Replacement (HMR) für den Austausch von Modulen im laufenden Betrieb und Live Reload für das vollständige Neuladen der Anwendung bei Änderungen an nativen Modulen oder der Konfiguration. Fast Refresh ist in React Native 0.76 standardmäßig aktiviert und erfordert keine zusätzliche Konfiguration — führen Sie einfach npx react-native start aus.

Metro-Konfiguration: metro.config.js

Die metro.config.js-Datei ist die Konfigurationsdatei von Metro, die sich im Stammverzeichnis eines React Native-Projekts befindet. Darin werden konfiguriert: Resolver (sourceExts, platformExtensions, extraNodeModules), Transformer (babelTransformerPath, minifierConfig), Server (port, host, enableFastRefresh) und Watcher (watchFolders, healthCheck). Die Standardkonfiguration von Metro erbt vom Paket @react-native/metro-config (React Native 0.76+). Für Monorepo-Projekte fügen Sie watchFolders hinzu — dies ermöglicht Metro, Änderungen in Paketen außerhalb des Projektstammverzeichnisses zu verfolgen. Um sourceExts zu konfigurieren, fügen Sie ‘svg’, ‘png’, ‘gql’ für benutzerdefinierte Transformatoren hinzu. Metro unterstützt asynchrone Konfigurationen über async function — dies ist nützlich für die dynamische Konfigurationsgenerierung basierend auf der Umgebung.

Build-Optimierung durch Konfiguration

Die Optimierung von Metro-Builds beginnt mit einer ordnungsgemäßen Cache-Konfiguration. Setzen Sie maxWorkers auf die Anzahl der CPUs minus 1. Verwenden Sie für Distributionen resetCache auf CI. Minimieren Sie sourceExts — zusätzliche Erweiterungen verlangsamen die Modulauflösung. Konfigurieren Sie watchFolders nur für die erforderlichen Verzeichnisse. Metro unterstützt Hermes-Bytecode-Minifizierung, die eine kleinere Bündelgröße als der Standard-Terser liefert — verwenden Sie minifierPath: ‘metro-minify-terser’.

Hermes-Bündelung: Build in Bytecode

Metro unterstützt einen Build-Modus direkt in Hermes-Bytecode — unter Umgehung der JavaScript-AST-Phase. Beim Build mit HermesTransformer werden Module in HBC (Hermes ByteCode) statt in einfaches JavaScript kompiliert. Dies bietet: kleinere Bündelgröße (30-40%), schnelleren Anwendungsstart (20-30%) und geringeren Speicherverbrauch. Zum Aktivieren setzen Sie hermesCommand in metro.config.js und aktivieren das Hermes-Flag in build.gradle (Android) oder Podfile (iOS). Der Hermes-Bündel-Build erfolgt in zwei Schritten: Zuerst erstellt Metro das JavaScript-Bündel, dann konvertiert Hermes CLI es in HBC. Ab React Native 0.70 ist Hermes die Standard-Engine auf Android, auf iOS ist eine explizite Aktivierung erforderlich.

Metro vs Webpack: Vergleich der Ansätze

Der Unterschied zwischen Metro und Webpack ist auf unterschiedliche Ziele zurückzuführen. Webpack ist ein universeller Bündler für das Web mit einem riesigen Ökosystem an Plugins und Loadern. Metro ist ein spezialisierter Bündler für React Native, bei dem die Priorität auf der Geschwindigkeit inkrementeller Builds und der korrekten Arbeit mit nativen Modulen liegt. Webpack verwendet einen langlebigen Modulgraphen mit intelligenter Cache-Invalidierung — dies ermöglicht schnelle Neubuilds im Web, schafft aber Probleme mit Plattformerweiterungen. Metro cachet den Graphen nicht zwischen Builds, sondern baut ihn jedes Mal neu auf — dies vereinfacht die Handhabung von Plattformerweiterungen und Haste-Modulen. Webpack unterstützt dynamische Importe mit Chunks, Metro ebenfalls — über React.lazy() und Suspense, jedoch mit der Einschränkung einer aktiven Anfrage. Das Ökosystem von Metro ist deutlich kleiner: Es gibt keinen Ersatz für style-loader, css-loader, file-loader — diese Aufgaben werden in React Native anders gelöst.

Wann Metro wählen

Metro ist die einzig richtige Wahl für React Native-Projekte. Webpack unterstützt keine plattformbewusste Auflösung von Haus aus, und die Einrichtung von React Native mit Webpack erfordert erheblichen Aufwand (haul bundler, expo web packager). Metro ist in React Native CLI integriert, wird vom offiziellen Meta-Team unterstützt und erhält mit jeder React Native-Version Updates. Für React Native Web-Projekte können Sie Webpack für Web-Builds verwenden, während Sie Metro für mobile Bündel beibehalten.