Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
Simple tooling to explore bundle size 📦, spot heavy packages, and inspect module/code structure in React Native apps.
retyui/react-native-bundle-discovery
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple package that helps developers visualize and analyze the bundle size of React Native apps.With this tool, you can easily explore your app's codebase, identify large or heavy packages, and inspect the structure of modules and code within your project.
- if you useReact 19 then it's time to remove a
prop-typespackage from your bundle. - Search for
development|debug|dev|storybookmodules in your production JS bundle (it's a dead code that should not be there). - Also check polyfills duplicates (search example:
url|fetch|crypto|buffer|base-?64). - Verify that you don't have any similar packages in your bundle (search example:
object|just-|debounce|ramda|lodash|underscore). I often see that devs use bothlodash/debounce,lodash.debounceanddebouncein their projects. Or mixramda,underscoreandlodash._ - Try to find
package.json$files in your bundle. They are often used to get only the packageversion/namebut all other fields are not needed in the bundle. - Please provide your ideas soo other devs can benefit from them :)
There are two ways to install the package:
- As in independent tool
- Or as aRozenite plugin (see below).
yarn add -D react-native-bundle-discovery
Add to yourmetro.config.js:
// metro.config.jsconst {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');+const {createSerializer} = require('react-native-bundle-discovery');+const mySerializer = createSerializer({+ includeCode: true, // Useful if you want to compare source/bundle code (but a report file will be larger)+ projectRoot: __dirname,+ //^^^ ⚠️ WARNING: In a monorepo setup, this should point to the monorepo root,+ // not the individual package directory.+});-const config = {};+const config = {+ serializer: {+ customSerializer: mySerializer+ },+};module.exports = mergeConfig(getDefaultConfig(__dirname), config);yarn dlx rozenite@latest init# init rozenite in your project (from: https://www.rozenite.dev/docs/getting-started)yarn add -D react-native-bundle-discovery-rozenite-plugin# add the plugin to your project
Then in themetro.config.js file add the following:
const { withRozenite } = require('@rozenite/metro');+const { withRozeniteBundleDiscoveryPlugin } = require('react-native-bundle-discovery-rozenite-plugin');const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');/** * Metro configuration * https://reactnative.dev/docs/metro * * @type {import('@react-native/metro-config').MetroConfig} */const config = {};module.exports = withRozenite( mergeConfig(getDefaultConfig(__dirname), config), {+ enhanceMetroConfig: config => withRozeniteBundleDiscoveryPlugin(config, { /* Your Bundle Discovery Options */ }), enabled: true, },);Now you can runyarn start and openReact Native DevTools
As example, for iOS you can run the following command, and it will generate themetro-stats.json file in the root of your project:
npx react-native bundle \ --entry-file index.js \ --platform ios \ --devfalse \ --bundle-output ios/main.jsbundle \ --assets-dest ios/assetsRun webserver to view the report:
npx react-native-bundle-discovery server metro-stats.json [--port<port>]
Run the following command to generate an HTML report from the JSON file:
npx react-native-bundle-discovery build metro-stats.json
| Prop | Default value | Description |
|---|---|---|
| serializer: Function | Default serializer | A custom serializer function. If not provided, a default serializer is used. |
| projectRoot: string | Required | The root directory of the project. |
| outputJsonPath: string | <root>/metro-stats.json | The path where the JSON report will be saved. Defaults tometro-stats.json in project root. |
| includeCode: boolean | true | Whether to include the source and output code in the JSON report. |
Become a financial contributor atOpenCollective orGitHub Sponsors
Similar projects:
- https://github.com/expo/atlas
- https://github.com/v3ron/expo-atlas-without-expo
- https://github.com/callstack/react-native-bundle-visualizer
- https://github.com/webpack-contrib/webpack-bundle-analyzer
- https://github.com/statoscope/statoscope
- https://github.com/relative-ci/bundle-stats/tree/master/packages/cli
Built usingDiscovery.js:
- Build blocks for pages:https://discoveryjs.github.io/discovery/#views-showcase
- Jora syntax:https://discoveryjs.github.io/jora/#article:jora-syntax-operators
About
Simple tooling to explore bundle size 📦, spot heavy packages, and inspect module/code structure in React Native apps.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.