A Rozenite plugin that instruments require() calls to profile initial app loading performance in React Native applications.

The Rozenite Require Profiler Plugin instruments require() calls during your React Native app's initial loading to track module initialization times. It helps you identify which modules impact app startup performance and optimize your initial bundle loading.

Features

• Initial App Loading Profiling: Automatically instruments require() calls during app startup to track initialization times
• Flame Graph Visualization: Interactive flame graph showing the module dependency tree with timing information
• Startup Performance Insights: Identify slow-loading modules that impact Time to Interactive (TTI)
• Bundle Optimization Candidates: Discover modules that are good candidates for code splitting or lazy loading
• Dependency Analysis: Visualize the complete module dependency graph loaded during initial app startup
• Real-time Metrics: View total initialization time, module count, and per-module evaluation times

Installation

Install the Require Profiler plugin as a dependency:

npm install @rozenite/require-profiler-plugin

Quick Start

1. Install the Plugin

npm install @rozenite/require-profiler-plugin

2. Configure Metro

Add the require profiler instrumentation to your Metro configuration using the enhanceMetroConfig option in withRozenite:

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withRozenite } = require('@rozenite/metro');
const { withRozeniteRequireProfiler } = require('@rozenite/require-profiler-plugin/metro');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withRozenite(
  mergeConfig(defaultConfig, {
    // Your existing Metro configuration
  }),
  {
    enabled: process.env.WITH_ROZENITE === 'true',
    enhanceMetroConfig: (config) => withRozeniteRequireProfiler(config),
  }
);

3. Integrate with Your App

Add the DevTools hook to your React Native app:

// App.tsx
import { useRequireProfilerDevTools } from '@rozenite/require-profiler-plugin';

function App() {
  // Enable Require Profiler DevTools
  useRequireProfilerDevTools();

  return <YourApp />;
}

4. Access DevTools

Start your development server and open React Native DevTools. You'll find the "Metro Require Profiler" panel in the DevTools interface.

Usage

Once configured, the plugin automatically instruments all require() calls in your app and provides:

• Flame Graph: Interactive visualization of your module dependency tree
  • Color-coded by initialization time (red = slow, blue = fast)
  • Click to zoom into specific modules
  • View module details in the sidebar
• Module Details: Click any module in the flame graph to see:
  • Evaluation time (how long the module took to initialize)
  • Module name and full path
  • Direct dependencies count
• Performance Metrics:
  • Total initialization time across all modules
  • Total number of modules loaded
  • Entry point module information

Use Cases

Identifying Slow Startup Modules

The flame graph makes it easy to spot modules that take a long time to initialize during app startup. Look for:

• Red modules (>70% of max time) - These are your slowest modules impacting startup
• Wide modules - Modules that take up a lot of horizontal space in the graph
• Deep dependency chains - Modules that load many dependencies during initial load

Finding Bundle Optimization Candidates

Modules that are good candidates for optimization typically:

• Take significant time to initialize (>100ms) during startup
• Are not needed immediately for the initial app experience
• Have many dependencies that could be deferred

Use the profiler to identify these modules and consider optimization strategies:

// Instead of loading heavy modules at startup:
import HeavyModule from './HeavyModule';

// Consider lazy loading or code splitting:
const HeavyModule = lazy(() => import('./HeavyModule'));

// Or move to conditional/dynamic imports:
if (condition) {
  const HeavyModule = await import('./HeavyModule');
}

Optimizing App Startup Performance

By identifying and optimizing slow-loading modules, you can:

• Reduce initial bundle size and loading time
• Improve Time to Interactive (TTI) metrics
• Prioritize critical modules for immediate loading
• Optimize dependency chains for faster startup

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥