react-native-bundle-visualizer

See what's inside your react-native bundle 📦

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

Using npx is the recommended way to run the visualizer

# React Native 0.72+
npx react-native-bundle-visualizer@latest
# or Expo SDK 50+
npx react-native-bundle-visualizer@latest --expo

Or you can install as a dev-dependency

yarn add --dev react-native-bundle-visualizer
# or npm
npm install --save-dev react-native-bundle-visualizer

To run the local version of visualizer, use the following command:

npx react-native-bundle-visualizer # if installed by yarn or npm
yarn run react-native-bundle-visualizer # if installed by Yarn

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) | --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 | | --border-checks | Pass the same flag to the underlying source-map-explorer to enable invalid mapping column/line checks. (default is false, no check) | --no-border-checks or --border-checks |

Common questions

1. What version of React Native and Expo is supported?

See the version compatibility table below.

2. What does [unmapped] represent?

[unmapped] is code in a final bundle without mapping to original source code (usually generated by bundlers: Webpack, Metro, Babel)

You can open your source maps online and check it

See example (red borders is unmapped code):

3. What alternatives I can use to inspect my bundle?

See the similar projects section below for alternatives to this package.

4. InvalidMappingColumn error

example: Your source map refers to generated column Infinity on line 2, but the source only contains 2075 column(s) on that line

if you faced this error, try to run the visualizer with --no-border-checks flag to disable invalid mapping column/line checks.

Similar projects

You can use then following alternatives:

• expo-atlas
• expo-atlas-without-expo
• react-native-bundle-visualizer
• react-native-bundle-discovery
• webpack-bundle-analyzer
• bundle-stats
• statoscope

Version compatibility

| Version | Comments | |------------------------------------------------------------------------------|------------------------------------------------------------------| | 4.x | Compatible with React Native 0.72+ or Expo SDK 50+ (Node.js 20+) | | 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