https://github.com/callstack/react-native-bundle-visualizer
See what packages are increasing your react-native bundle size 📦
https://github.com/callstack/react-native-bundle-visualizer
bundle-size bundle-visualizer expo react-native
Last synced: about 1 month ago
JSON representation
See what packages are increasing your react-native bundle size 📦
- Host: GitHub
- URL: https://github.com/callstack/react-native-bundle-visualizer
- Owner: callstack
- License: mit
- Created: 2017-09-02T13:56:22.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2025-01-31T08:08:54.000Z (5 months ago)
- Last Synced: 2025-05-08T05:54:10.816Z (about 2 months ago)
- Topics: bundle-size, bundle-visualizer, expo, react-native
- Language: TypeScript
- Homepage:
- Size: 4.91 MB
- Stars: 1,544
- Watchers: 9
- Forks: 45
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# react-native-bundle-visualizer
See what's inside of your react-native bundle 📦
Uses the awesome [source-map-explorer](https://github.com/danvk/source-map-explorer) to visualize the output of the [Metro bundler](https://github.com/facebook/metro).
## 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](https://github.com/npm/npx) is installed and run the following command in your project root
`npx react-native-bundle-visualizer`
### Or install as a dev-dependency
```sh
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][smeo]) | `--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` |
| `--no-border-checks` | Pass the same flag to the underlying `source-map-explorer` to disable invalid mapping column/line checks. | `--no-border-checks` |
[smeo]: https://github.com/danvk/source-map-explorer#options
> Use [react-native-bundle-visualizer@2](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) 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](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v2) | Compatible with React-Native CLI bootstrapped projects and Expo SDK 40 or earlier. |
| [1.x](https://github.com/IjzerenHein/react-native-bundle-visualizer/tree/v1) | Uses the [Haul bundler](https://github.com/callstack/haul) instead instead of the Metro output. |
## License
[MIT](./LICENSE.txt)