npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-bundle-visualizer

1.4.2 • Public • Published

react-native-bundle-visualizer

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

bundle-visualizer-animation

Uses the awesome webpack-visualizer and haul 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 you have node 8 or higher installed.

Depending on your react-native version, install the appropriate package as a dev dependency:

RN version Install react-native-bundle-visualizer
>= 0.57 yarn add --dev react-native-bundle-visualizer
0.49 - 0.56 yarn add --dev react-native-bundle-visualizer@1.3.5
<= 0.48 yarn add --dev react-native-bundle-visualizer@1.1.0

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

Gitignore output files

Additionally, add the haul generated files & folders to your .gitignore file:

# Haul bundler
/assets
stats.html
index.ios.bundle
index.ios.bundle.map
haul-debug.log

Disclaimer

The sizes reported are an indication rather than the exact byte size in your bundle. This is because the Haul packager returns different bundles compared to the react-native Metro bundler. Also, due to limitations in webpack's stats, the "actual" (minified) numbers reported here are approximate, but they should be pretty close.

License

MIT

install

npm i react-native-bundle-visualizer

Downloadsweekly downloads

666

version

1.4.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability