Metro Bundler: vad det är, projektbygge och funktionsprincip

Vad är Metro Bundler

Metro Bundler är en öppen källkod JavaScript-bundler, utvecklad av Meta för React Native och används som standard i alla projekt inom ramverket. Metro's uppgift är att ta projektets JavaScript-kod tillsammans med beroenden och bygga en eller flera paket som körs på enheten. Till skillnad från universella bundlers (Webpack, Rollup, Parcel) är Metro optimerad för mobil utvecklings specificitet: minimal byggtid, inkrementella uppdateringar under utveckling och korrekt funktion med plattformsmoduler (inbyggda moduler Objective-C, Swift, Java, Kotlin). Metro levereras inom React Native CLI och kräver ingen separat installation. Från och med React Native 0.72 stöder Metro version 0.80+ parallell transpilering av moduler, vilket påskyndar bygget på flerkärniga processorer med upp till 40%.

Metro Arkitektur: Resolver, Transformer och Bundler

Metros arkitektur är uppdelad i tre oberoende komponenter: Resolver, Transformer och Bundler. Resolver ansvarar för att söka och lösa moduler — den läser import/require-uttryck, hittar motsvarande filer med hänsyn till plattformstillägg och returnerar absoluta sökvägar. Transformer utför transpilering: tillämpar Babel med förinställningar och plugins, omvandlar JSX, TypeScript eller Flow till ren JavaScript. Bundler är det sista steget: den tar emot beroendegrafen från Resolver och transformerade filer från Transformer, serialiserar dem sedan till ett eller flera paket (module bundles). Uppdelningen i tre steg gör att Metro kan cachelagra resultaten från varje steg: om bara en fil har ändrats kan Resolver och Bundler använda cachen för de återstående modulerna, vilket ger en hastighetsökning på upp till 10 gånger i utvecklingsläge.

Resolver: modulupplösning och plattformsmedveten sökning

Resolver i Metro implementerar algoritmen för modulupplösning, delvis kompatibel med Node.js module resolution. Den viktigaste skillnaden från Node.js — stöd för plattformstillägg: require('./Component') söker efter Component.native.js, Component.ios.js, Component.android.js i angiven prioritetsordning. Resolver stöder också package.json-fältet "react-native" för att mappa moduler till alternativa implementeringar — detta är standardmekanismen för bibliotek med plattformskod. Om filen inte hittas kastar Resolver ett fel med full sökstack.

Transformer: Babel och transpilering

Transformer inuti Metro använder Babel med förinställningen metro-react-native-babel-preset. Standardkonfigurationen omfattar: omvandling av JSX till React.createElement, stöd för TypeScript (borttagning av typer), stöd för Flow och polyfills för moderna JavaScript-standarder (async/await, optional chaining, nullish coalescing). Transformer arbetar i parallellt läge: varje modul transpileras oberoende med hjälp av en pool av worker-processer (som standard motsvarar antalet antalet CPU:er). Från och med Metro 0.80 stöds Granular Transformer Cache — cachelagringsinvalidering på individuell filnivå.

Plattformstillägg i Metro

En av de viktigaste funktionerna i Metro är stödet för plattformsfiltillägg. Ett React Native-projekt kan innehålla tre versioner av en modul: Component.ios.js (iOS), Component.android.js (Android) och Component.native.js (båda plattformarna). Vid import av require('./Component') väljer Resolver automatiskt rätt version beroende på målplattformen för bygget. Detta gör det möjligt att skriva plattformsberoende kod utan villkorliga Platform.OS-konstruktioner. Prioritetsordningen: namn.plattform.js > namn.native.js > namn.js. Tillägget .native.js används för gemensam kod som fungerar på båda plattformarna men inte är kompatibel med webben. Tilläggen .ios.js och .android.js används för att implementera specifika funktioner — navigering, gester, arbete med filsystemet. Metro stöder anpassade tillägg via konfigurationen resolver.sourceExts.

// metro.config.js — inställning av sourceExts och watchFolders
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 och Fast Refresh i Metro

Fast Refresh är den heta omladdningsmekanismen för React Native implementerad ovanpå Metro. När en utvecklare ändrar en fil transpilerar Metro bara den ändrade modulen och skickar uppdateringen till appen via WebSocket. Fast Refresh uppdaterar gränssnittet utan att ladda om hela appen och bevarar React-komponenternas tillstånd om bara JSX eller stilar har ändrats. Om kod med hooks eller tillstånd har ändrats utför Fast Refresh ommontering av endast den ändrade komponenten. Metro stöder två lägen: Hot Module Replacement (HMR) för direkt utbyte av moduler och Live Reload för fullständig omladdning av appen vid ändring av inbyggda moduler eller konfiguration. Fast Refresh är aktiverat som standard i React Native 0.76 och kräver ingen extra konfiguration — det räcker att köra npx react-native start.

Metro Konfiguration: metro.config.js

metro.config.js är konfigurationsfilen för Metro, belägen i roten av React Native-projektet. I den konfigureras: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh) och watcher (watchFolders, healthCheck). Standardkonfigurationen för Metro ärvs från paketet @react-native/metro-config (React Native 0.76+). För projekt med monorepo, lägg till watchFolders — detta gör att Metro kan spåra ändringar i paket utanför projektroten. För att konfigurera sourceExts, lägg till 'svg', 'png', 'gql' för anpassade transformatorer. Metro stöder asynkrona konfigurationer via async function — detta är användbart för dynamisk generering av konfiguration baserat på miljön.

Byggoptimering genom konfiguration

Optimering av Metro-bygge börjar med rätt cache-konfiguration. Ställ in maxWorkers till antalet CPU:er minus 1. För distributioner, använd resetCache på CI. Minimera sourceExts — extra tillägg saktar ner modulupplösning. För stora projekt, konfigurera watchFolders endast på nödvändiga kataloger. Metro stöder Hermes bytecode-minifiering, som ger mindre paketstorlek än standard Terser — använd minifierPath: 'metro-minify-terser'.

Hermes bundling: bygge till bytekod

Metro stöder läget att bygga direkt till Hermes bytekod — hoppa över JavaScript AST-steget. Vid bygge med HermesTransformer kompileras moduler till HBC (Hermes ByteCode) istället för vanlig JavaScript. Detta ger: mindre paketstorlek (med 30-40%), snabbare appstart (med 20-30%) och lägre minnesförbrukning. För att aktivera, ställ in hermesCommand i metro.config.js och aktivera Hermes-flaggan i build.gradle (Android) eller Podfile (iOS). Bygget av Hermes-paket sker i två steg: först bygger Metro JavaScript-paketet, sedan konverterar Hermes CLI det till HBC. Från och med React Native 0.70 är Hermes standardmotorn på Android, på iOS krävs explicit aktivering.

Metro vs Webpack: jämförelse av tillvägagångssätt

Skillnaden mellan Metro och Webpack beror på olika mål. Webpack är en universell bundler för webben med ett enormt ekosystem av plugins och loaders. Metro är en specialiserad bundler för React Native, där prioritet är hastigheten på inkrementellt bygge och korrekt funktion med inbyggda moduler. Webpack använder en långvarig modulgraf med intelligent cache-invalidering — detta ger snabba ombyggen på webben men skapar problem med plattformstillägg. Metro cache-lagrar inte grafen mellan byggen, utan bygger den varje gång — detta förenklar bearbetningen av plattformstillägg och Haste-moduler. Webpack stöder dynamiska importer med chunks, Metro också — via React.lazy() och Suspense, men med begränsning till en aktiv förfrågan. Metros ekosystem är betydligt mindre: det finns ingen ersättning för style-loader, css-loader, file-loader — dessa uppgifter löses annorlunda i React Native.

När ska man välja Metro

Metro är det enda rätta valet för React Native-projekt. Webpack stöder inte plattformsmedveten resolution direkt ur lådan, och att konfigurera React Native med Webpack kräver betydande ansträngning (haul bundler, expo web packager). Metro är integrerat i React Native CLI, stöds av det officiella Meta-teamet och får uppdateringar med varje React Native-utgåva. För React Native Web-projekt kan du använda Webpack för webbbygge, medan Metro behålls för mobila paket.