@gedeagas/react-native-bundle-visualizer

See what's inside of your react-native bundle 📦

!bundle-visualizer-animation

Uses the awesome source-map-explorer to visualize the output of the Metro bundler.

Purpose

Sometimes, importing a single javascript library can drastically increase your bundle size. This package helps you to identify such a library, so you can keep the bundle size low and loading times fast.

Usage

Make sure npx is installed and run the following command in your project root

npx @gedeagas/react-native-bundle-visualizer

$3

``sh
yarn add --dev @gedeagas/react-native-bundle-visualizer
`

And run it:

`
yarn run react-native-bundle-visualizer
`

_or when using npm:_

`
npm install --save-dev @gedeagas/react-native-bundle-visualizer
npx react-native-bundle-visualizer
`

CI/CD Usage

For CI/CD environments where you need to capture just the bundle size for comparison or monitoring, use the --bundle-size-only option (outputs 3 decimal places):

`bash


Output only the bundle size in megabytes (e.g., "2.450MB")

if (( $(echo "$CURRENT_NUM > $PREV_NUM" | bc -l) )); then
echo "⚠️ Bundle size increased from $PREV_SIZE to $CURRENT_SIZE"
exit 1
else
echo "✅ Bundle size is $CURRENT_SIZE (was $PREV_SIZE)"
fi
`

Command line arguments

All command-line arguments are optional. By default a production build will be created for the ios platform.

| Option | Description | Example |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| platform | Platform to build (default is ios) | --platform ios |
| dev | Dev or production build (default is false) | --dev false |
| entry-file | Entry-file (when omitted tries to auto-resolve it) | --entry-file ./index.ios.js |
| bundle-output | Output bundle-file (default is tmp) | --bundle-output ./myapp.bundle |
| format | Output format html, json or tsv (default is html) (see [source-map-explorer options][smeo]) | --format json |
| only-mapped | Exclude "unmapped" bytes from the output (default is false). This will result in total counts less than the file size. | --only-mapped |
| verbose | Dumps additional output to the console (default is false) | --verbose |
| reset-cache | Removes cached react-native files (default is false) | --reset-cache |
| --expo | Set this to true/ false based on whether using expo or not. For eg, set --expo true when using expo. Not required to pass this for react-native cli. (default is false) | --expo false |
| --no-border-checks | Pass the same flag to the underlying source-map-explorer to disable invalid mapping column/line checks. | --no-border-checks |
| --bundle-size-only | Output only the bundle size in plain megabytes with "MB" suffix (3 decimal places, e.g., "2.450MB") (useful for CI/CD environments). This will suppress all other output and return just the formatted size. | --bundle-size-only` |

[smeo]: https://github.com/danvk/source-map-explorer#options

> Use react-native-bundle-visualizer@2 when targetting Expo SDK 40 or lower.

Version compatibility

| Version | Comments |
| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| 3.x | Compatible with React-Native CLI bootstrapped projects and Expo SDK 41 or higher. |
| 2.x | Compatible with React-Native CLI bootstrapped projects and Expo SDK 40 or earlier. |
| 1.x | Uses the Haul bundler instead instead of the Metro output. |

License

MIT