Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 73 Commits
.github		.github
.vscode		.vscode
src		src
test		test
.gitignore		.gitignore
.travis.yml		.travis.yml
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

And when using Expo:

npx react-native-bundle-visualizer --expo managed

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 android`
`expo`	Expo target,managed orbare. This ensures that the project is bundled with expo settings and that`.expo` file extensions are handled appropriately.	`--expo bare`
`dev`	Dev or production build (default isfalse)	`--dev false`
`entry-file`	Entry-file (when omitted tries to auto-resolve it)	`--entry-file ./index.android.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`

Usage with older react-native versions and the Haul bundler

As ofreact-native-bundle-visualizer version 2.x, the direct output of theMetro bundler is visualized using thesource-map-explorer.

Prior to version 2, the Haul bundler was used which used Webpack. If you are having problems visualizing the output for older react-native versions, or you want to explicitly use the Haul bundler,please check out the V1 documentation.