Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/IjzerenHein/react-native-bundle-visualizer
See what packages are increasing your react-native bundle size 📦
https://github.com/IjzerenHein/react-native-bundle-visualizer
bundle-size bundle-visualizer expo react-native
Last synced: 2 months ago
JSON representation
See what packages are increasing your react-native bundle size 📦
- Host: GitHub
- URL: https://github.com/IjzerenHein/react-native-bundle-visualizer
- Owner: IjzerenHein
- License: mit
- Created: 2017-09-02T13:56:22.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-04-05T09:10:30.000Z (over 1 year ago)
- Last Synced: 2024-08-21T07:47:14.978Z (2 months ago)
- Topics: bundle-size, bundle-visualizer, expo, react-native
- Language: TypeScript
- Homepage:
- Size: 4.91 MB
- Stars: 1,453
- Watchers: 10
- Forks: 42
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-react-native - react-native-bundle-visualizer ★141 - See what's inside your RN bundle; useful for optimizing the bundle size (Utilities / Other Platforms)
- awesome-list - react-native-bundle-visualizer - native bundle size 📦 | IjzerenHein | 805 | (JavaScript)
- awesome-react-native - react-native-bundle-visualizer ★141 - See what's inside your RN bundle; useful for optimizing the bundle size (Utilities / Other Platforms)
- awesome-react-native - react-native-bundle-visualizer ★141 - See what's inside your RN bundle; useful for optimizing the bundle size (Utilities / Other Platforms)
- awesome-react-native - react-native-bundle-visualizer ★141 - See what's inside your RN bundle; useful for optimizing the bundle size (Utilities / Other Platforms)
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` |
[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)