Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 111 Commits
.github		.github
.vscode		.vscode
src		src
test		test
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CONTRIBUTION.md		CONTRIBUTION.md
LICENSE.txt		LICENSE.txt
README.md		README.md
package.json		package.json
react-native-bundle-visualizer2.gif		react-native-bundle-visualizer2.gif
yarn.lock		yarn.lock

Repository files navigation

react-native-bundle-visualizer

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

Uses the awesomesource-map-explorer to visualize the output of theMetro 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 surenpx is installed and run the following command in your project root

npx react-native-bundle-visualizer

Or install as a dev-dependency

yarn add --dev react-native-bundle-visualizer

And run it:

yarn run react-native-bundle-visualizer

or when using npm:

npm install --save-dev react-native-bundle-visualizer ./node_modules/.bin/react-native-bundle-visualizer

Command line arguments

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

Option	Description	Example
`platform`	Platform to build (default isios)	`--platform ios`
`dev`	Dev or production build (default isfalse)	`--dev false`
`entry-file`	Entry-file (when omitted tries to auto-resolve it)	`--entry-file ./index.ios.js`
`bundle-output`	Output bundle-file (default istmp)	`--bundle-output ./myapp.bundle`
`format`	Output formathtml,json ortsv (default ishtml) (seesource-map-explorer options)	`--format json`
`only-mapped`	Exclude "unmapped" bytes from the output (default isfalse). This will result in total counts less than the file size.	`--only-mapped`
`verbose`	Dumps additional output to the console (default isfalse)	`--verbose`
`reset-cache`	Removes cached react-native files (default isfalse)	`--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 isfalse)	`--expo false`

Usereact-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 theHaul bundler instead instead of the Metro output.