metro-bundler

Metro bundler performance improves through metro.config.js customization: enable inlineRequires to reduce bundle size, configure transformer and resolver options for faster builds, implement caching strategies, and use resetCache when needed. These adjustments directly speed up development cycles.

Module resolution errors stem from incorrect sourceExts, assetExts, or watchFolders configuration. Configure platform extensions, verify asset extensions match your project structure, and adjust watchFolders to include monorepo paths. Metro then locates dependencies correctly.

Yes, Metro supports custom transformers in metro.config.js. Define transformer rules for specific file types—SVG transformers convert vector assets during bundling. Pair this with assetExts configuration to handle asset processing.

Monorepo Metro setup requires watchFolders to specify workspace directories and resolver configuration to handle cross-package imports. Use mergeConfig to combine custom settings with Metro defaults, enabling bundler awareness of all project packages.

Add resetCache: true to metro.config.js to clear cached bundles, and configure the server port through server options—default is 8081. Restart the bundler after changes to apply new cache and port settings.

inlineRequires eliminates unused code at bundle time, reducing app size. Bundle splitting divides code into smaller chunks for faster loading. Both techniques are Metro optimization strategies that improve React Native app startup performance.