React NativeMetro là bundler default của RN, viết bởi Meta. Tối ưu cho dev experience mobile (hot reload nhanh, source map cho native).
Khác Webpack:
| Metro | Webpack | |
|---|---|---|
| Target | RN bundle (JS+assets cho mobile) | Web bundle (JS+CSS+HTML) |
| Entry | Một entry duy nhất | Multi-entry chunking |
| Transform | Babel only | Babel/SWC/esbuild loader |
| HMR | Fast Refresh tích hợp | HMR plugin riêng |
| Tree shaking | Hạn chế (tốt hơn từ 0.73+) | Mạnh, sideEffects flag |
| Code splitting | Không (single bundle) | Built-in dynamic import |
| Source map | Native + JS combined | JS only |
Config (metro.config.js):
js
const { getDefaultConfig } = require('expo/metro-config')
const config = getDefaultConfig(__dirname)
config.resolver.assetExts.push('lottie', 'glb') // custom asset
config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer')
module.exports = configCải tiến 2026:
- Metro 0.81+ tree-shaking ESM tốt hơn (giảm bundle size 10–20%).
- Lazy bundle loading — bundle splitting cho RN screens.
- Hermes-aware optimization (drop unused worklets).
Khi nào thay Metro:
- Hiện tại không có alternative production-ready.
- re.pack (project Callstack) port Webpack cho RN — dùng cho monorepo lớn cần code splitting cross-bundle, nhưng còn experimental.