Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

updated-react-native-bundle-visualizer

reck75326MIT1.0.0

See what's inside your react-native bundle

react-native-bundle-visualizer, react native bundle size, react-native, react native, bundle, visualizer, size, bundle-size

readme

THIS IS A FORK OF IjzerenHein/react-native-bundle-visualizer

LOOKING FOR NEW MAINTAINER / HOME

This repository is looking for a new maintainer and home. 🏠 Please contact me here when you are interested in continuing development or know a new place. This repository will be archived automatically in Q1 of 2022.

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 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 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

The --expo command is no longer needed for Expo SDK 41 or higher; and has been removed. 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

changelog

[Unreleased]

3.1.0 (2021-10-16)

Features

  • Add support for Yarn monorepos by using require.resolve to locate the react-native cli. (thank you @braden1996)

3.0.0 (2021-08-23)

Bug Fixes

  • Fixes @expo/metro-config resolving to old dependencies, causing problems with newer Expo SDK versions (removes this dependency entirely). See the discussion here.

Breaking changes

  • Removes the -expo command line option. As of Expo SDK 41 this option is no longer needed. Use react-native-bundle-visualizer@2 for Expo SDK 40 or lower.

2.3.0 (2021-08-03)

  • Fix unknownApp name for Expo apps
  • Drop support for Node 10
  • Updated dependencies to their latest versions
  • Added tests for react-native 0.64 and Expo SDK 42
  • Expo apps using SDK 41 or higher no longer require --expo bare/managed

2.2.1 (2020-07-07)

  • Add --expo [bare|managed] option to generate Expo accurate bundles and handle .expo files correctly
  • Add --format [html|json|tsv] option to output as json or tsv files (thanks wilau2!)
  • Add --only-mapped option for excluding "unmapped" bytes from the output (thanks wilau2!)
  • Updated dependencies to their latest versions

2.1.1 (2019-12-10)

  • Fixed build error when app-name contains special characters (Thanks! @ofiron01)
  • Added tests for RN61 and Expo35
  • Added CI support through Travis
  • Updated all dependencies to their latest versions
  • Removed all non-essential files from NPM package

2.0.4 (2019-10-01)

This version switches to using the awesome source-map-explorer package which can visualize the output from the Metro bundler directly. This means that the Haul bundler is no longer used and it should therefore result in less build errors and more accurate results. The source-map-explorer package also provides an interactive User interface which allows you to navigate deeper into the source code. Additionally, you can now run this version directly using npx without having to install any dependencies.

To use, just run npx react-native-bundle-visualizer

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 android
dev Dev or production build (default is false) --dev false
entry-file Entry-file (when omitted tries to auto-resolve it) --entry-file ./index.android.js
bundle-output Output bundle-file (default is tmp) --bundle-output ./myapp.bundle
verbose Dumps additional output to the console (default is false) --verbose
reset-cache Removes cached react-native files (default is false) --reset-cache

1.4.2 (2019-07-31)

  • Fixed Can't resolve 'node_modules/expo/AppEntry.js' error when using expo
  • Fixed certain expo-libs giving errors because they were not transpiled

1.4.1 (2019-03-20)

  • Fixed react-hot-loader missing dependency issue with latest haul
  • Fixed new @react-native-community libs not transpiled correctly