React Native Bundle DiscoveryUI
Requires react-native-bundle-discovery-ui.
# Start a local server (default port: 8079)
npx react-native-bundle-discovery-ui metro-stats.json [--port <port>]
# Build a static HTML report (default output: .bundle-discovery)
npx react-native-bundle-discovery-ui build metro-stats.json [--output <path>]
# Compare with a "before" report (works with both commands, adds the Compare tab)
npx react-native-bundle-discovery-ui pr-stats.json --compare main-stats.json
See it in action in the live demo (a static build with --compare).
The top bar shows the platform, whether the bundle is a production/minified build (warns about dev or
unminified bundles), the total size split into your code and node_modules, and the report build date.
Tabs
| Tab | What it shows |
|---|---|
| Insights | Summary cards, heaviest packages and own modules, and the CLI recommendations ranked by estimated savings (production reports only) |
| Treemap | Bundle treemap, colored by package, file type or issues (duplicates / removable code) |
| Packages | All packages with total size of the filtered list, sortable by size, name or duplicates |
| Modules | All modules with total size of the filtered list, sortable by size, name or duplicates |
| Duplicates | Duplicate packages and modules with possible savings |
| Compare | Only with --compare: size, module/package count changes, new duplicates and deprecated packages, version changes, added/removed/changed modules |
Pages
- Package page: versions, status and recommendation chips, bundle share and rank, copies with possible savings, and tabs for files, importers, the shortest import chain ("Why is this in my bundle?") and versions.
- Module page: package/version and status chips, size share and rank, transform delta, an "Imported by" graph (zoom/pan, click to open a module), imports, and source/bundled code. In compare mode, the Diff tab shows source and output changes against the "before" report.
The Compare tab uses the same comparison as cli compare.