react-native-bundle-discovery

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.

Packages:

• react-native-bundle-discovery - simple JS library to generate a JSON report of the bundle.
• react-native-bundle-discovery-ui - UI to visualize the bundle report.
• react-native-bundle-discovery-cli - CLI to analyze the bundle report.
• react-native-bundle-discovery-rozenite-plugin - Rozenite plugin to integrate UI tool to React Native DevTools.

Setup:

There are two ways to install the package:

1. As in independent tool (UI + CLI)
2. Or as a Rozenite plugin (see: _rozenite/README.md)

🚀 If you've migrated to Re.Pack, you can still use this package to analyze 📊 JS bundles 📦 generated by Re.Pack.

💡 Learn more: 📖 Re.Pack.md

1. Install (independent tool)

yarn add -D react-native-bundle-discovery # required for generating the JSON report
yarn add -D react-native-bundle-discovery-ui # optional: used for visualizing the report in the browser
yarn add -D react-native-bundle-discovery-cli # optional: used for analysis of the report in the CLI

Add to your metro.config.js:

// metro.config.js
const {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);

2. Install (as plugin for Rozenite)

See: _rozenite/README.md

3. Build the app

For example, for iOS you can run the following command, and it will generate the metro-stats.json file in the root of your project:

npx react-native bundle \
  --entry-file index.js \
  --platform ios \
  --dev false \
  --bundle-output ios/main.jsbundle \
  --assets-dest ios/assets

4. Commands

CLI package

You need to install react-native-bundle-discovery-cli

# Display all recommended optimizations for the bundle
npx react-native-bundle-discovery-cli metro-stats.json

# Display all packages in the bundle report
npx react-native-bundle-discovery-cli packages metro-stats.json [--sort size|name] [--format json|table|default]

UI package

You need to install react-native-bundle-discovery-ui

# Start server to view the report in the browser (default port: 8079)
npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]

# Build the report into a static HTML file
npx react-native-bundle-discovery-ui build metro-stats.json

react-native-bundle-discovery JS API

createSerializer(options: Options)

| 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. ⚠️ In a monorepo setup, this should point to the monorepo root, not the individual package directory. | | outputJsonPath: string | <root>/metro-stats.json | The path where the JSON report will be saved. Defaults to metro-stats.json in project root. | | includeCode: boolean | true | Whether to include the source and output code in the JSON report. |

⚠️ Be cautious sharing reports with includeCode enabled

Enabling this option significantly increases report size and embeds the source code of your assets.

If your code is proprietary 🔒, share these reports responsibly 🤝!

createResolveRequest(options: ResolveRequestOptions)

| Prop | Default value | Description | | ------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------- | | removePromisePolyfill: boolean | false | Remove the Promise polyfill as Hermes provide own impl. (issue: #57702) | | removeUTFSequence: boolean | false | Remove useless undocumented RN module. |

Helper that creates a custom resolve request function to filter out unnecessary modules from the bundle. You can get recommendations during the analysis of the bundle report using the CLI tool.

// metro.config.js
const { createResolveRequest } = require("react-native-bundle-discovery");
const resolveRequest = createResolveRequest({
  removePromisePolyfill: true,
  removeUTFSequence: true,
});
const config = {
  resolver: {
    resolveRequest,
  },
};

Financial Contributors

Become a financial contributor at OpenCollective or GitHub Sponsors

Other

Similar projects:

• expo-atlas
• expo-atlas-without-expo
• react-native-bundle-visualizer
• webpack-bundle-analyzer
• bundle-stats
• statoscope

Built using Discovery.js:

• Build blocks for pages: https://discoveryjs.github.io/discovery/#views-showcase
• Jora syntax: https://discoveryjs.github.io/jora/#article:jora-syntax-operators