rn-bundle-analyzer

rn-bundle-analyzer is a React Native bundle analysis tool. It collects module data during the Metro bundling process and generates a visual report. It does not depend on SourceMap parsing, which makes it useful for bundle-size diagnostics and dependency hotspot investigation.

Features

• File list view: inspect bundled files by size, path, and type
• Directory tree view: analyze size distribution by folder hierarchy
• Inverse dependency view: see which files depend on a target file
• Static report output: generate HTML + JS data files for sharing and archiving

Installation

yarn add -D rn-package-analyse
# or
npm i -D rn-package-analyse

Quick Setup

Add createProcessModuleFilter to your metro.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const { mergeConfig } = require('@react-native/metro-config')
const { getMetroConfig } = require('@jdtaro/plugin-platform-jdrn/dist/supporter')
const { createProcessModuleFilter } = require('rn-package-analyse')

module.exports = (async function () {
  const baseConfig = await getMetroConfig()

  // Preserve any existing processModuleFilter logic.
  const originalProcessModuleFilter = baseConfig.serializer?.processModuleFilter

  return mergeConfig(
    {
      serializer: {
        // Collect module data during bundling and write report artifacts.
        processModuleFilter: createProcessModuleFilter(originalProcessModuleFilter),
      },
    },
    baseConfig
  )
})()

Generate the Report

After setup, run your normal React Native bundle/build command (for example, a release build or bundle command). When bundling completes, a rn-package-analyse folder will be generated in your project root.

Typical Use Cases

• Bundle size suddenly increases and you need a fast root-cause analysis
• A core file appears over-coupled and you want inverse dependency tracing
• Compare bundle structure across builds/releases for regression checks

Notes

• Ensure Metro serializer.processModuleFilter is correctly wired.
• If you already have a custom processModuleFilter, pass it through as shown above.
• Use consistent build parameters in CI for reliable cross-build comparison.

Local Development

npm run build

Build steps:

1. Compile TypeScript into dist
2. Copy template assets into dist/templates

License

ISC