Re.Pack

For projects using Re.Pack there are two ways to use react-native-bundle-discovery:

As the BundleDiscoveryPlugin Webpack/Rspack plugin
Or with a JSON report from Rsdoctor

Using an AI coding agent? Point it at the setup-react-native-bundle-discovery skill to install react-native-bundle-discovery automatically.

Rspack/Webpack plugin

BundleDiscoveryPlugin creates a metro-stats.json file that react-native-bundle-discovery uses to analyze your JS bundle.

Install the package:

yarn add -D react-native-bundle-discovery

rspack.config.mjs (or webpack.config.js)

import { BundleDiscoveryPlugin } from 'react-native-bundle-discovery';

export default Repack.defineRspackConfig({
  plugins: [
    new BundleDiscoveryPlugin({
      // Default options, you can customize them if needed
      filename: 'metro-stats.json',
      options: { source: true }, // All options: https://webpack.js.org/configuration/stats/#stats-options
      enabled: !!process.env.BUNDLE_ANALYZER,
    }),
  ],
});

Build the app with the BUNDLE_ANALYZER environment variable:

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

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

JSON report from Rsdoctor

If you use Rsdoctor, generate a JSON report that react-native-bundle-discovery can read.

Install the packages:

yarn add -D react-native-bundle-discovery-ui
yarn add -D @rsdoctor/rspack-plugin
# or the webpack version if used instead of rspack:
yarn add -D @rsdoctor/webpack-plugin

rspack.config.mjs (or webpack.config.js)

import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
// or import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';

export default Repack.defineRspackConfig({
  plugins: [
    process.env.RSDOCTOR &&
      new RsdoctorRspackPlugin({
        // or `RsdoctorWebpackPlugin`
        disableClientServer: true,
        output: {
          reportDir: '.',
          mode: 'brief',
          options: { type: ['json'] },
        },
      }),
  ].filter(Boolean),
});

Build the app with the RSDOCTOR environment variable:

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

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

npx react-native-bundle-discovery-ui rsdoctor-data.json   # UI
npx react-native-bundle-discovery-cli rsdoctor-data.json  # CLI

Known limitations

rsdoctor-data.json does not include the source code or bundled output code.

Alternative tools

Re.Pack bundle analysis guide

Rspack/Webpack pluginCopy Anchor Link

JSON report from RsdoctorCopy Anchor Link

Alternative toolsCopy Anchor Link

On this page

Rspack/Webpack plugin

JSON report from Rsdoctor

Alternative tools