Rollipop | React Native Bundle Discovery

For projects bundled with Rollipop (Rolldown) instead of Metro, use the bundleDiscoveryRollipopPlugin plugin. It creates a metro-stats.json file (format) that react-native-bundle-discovery uses to analyze your JS bundle.

Install the package:

yarn add -D react-native-bundle-discovery

rollipop.config.ts

import { bundleDiscoveryRollipopPlugin } from 'react-native-bundle-discovery';
import { defineConfig } from 'rollipop';

export default defineConfig({
  plugins: [
    bundleDiscoveryRollipopPlugin({
      // Default options, you can customize them if needed
      filename: 'metro-stats.json', // resolved against the Rollipop `root`
      includeCode: true,
      fetchPackagesMetadata: true,
      enabled: !!process.env.BUNDLE_ANALYZER,
    }),
  ],
});

Build a minified release bundle with the BUNDLE_ANALYZER environment variable (Rollipop doesn't minify release bundles by default):

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

After the build, metro-stats.json is in the root of your project. Analyze it:

npx react-native-bundle-discovery-ui metro-stats.json   # UI
npx react-native-bundle-discovery-cli metro-stats.json  # CLI

Notes

Rolldown minifies the bundle as a whole, so the plugin minifies every module on its own to show its output code and size. Module sizes are close to, but slightly larger than, their share of the real bundle.