Require Profiler Plugin

    The Require Profiler plugin tracks how long each require() call takes while your app starts up, and shows the result as a flame graph — so you can see exactly which modules are slowing down your app's Time to Interactive.

    Installation

    Make sure to go through the Getting Started guide before installing the plugin.

    npm
    yarn
    pnpm
    bun
    deno
    npm install -D @rozenite/require-profiler-plugin

    Enable the Metro instrumentation:

    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),
  },
);

    Add the DevTools hook to your app:

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

function App() {
  useRequireProfilerDevTools();

  return <YourApp />;
}

    Usage

    Once configured, "Metro Require Profiler" appears in your React Native DevTools sidebar, showing a flame graph of every module loaded during startup.

    • Color reflects timing: red modules took over 70% of the slowest module's time; blue modules were fast.
    • Click a module to zoom into that part of the tree, or open its detail panel for evaluation time, path, dependency count, and importing modules.
    • The header shows total initialization time, module count, and the entry point.
    • Use the filter (⚙️ in the header) to hide chains under a duration threshold — start around 100ms to focus on what actually matters for startup time.

    What to look for

    Wide, red, or deeply nested modules are your best candidates for optimization. Once you've found one that isn't needed immediately, defer it with a conditional or lazy require():

    // Instead of loading it up front:
const HeavyModule = require('./HeavyModule');

// Load it only when needed:
let HeavyModule;
const loadHeavyModule = () => {
  if (!HeavyModule) {
    HeavyModule = require('./HeavyModule');
  }
  return HeavyModule;
};

    Re-run the profiler after each change to confirm the improvement and catch regressions.

    Next: Learn about Plugin Development, or explore other Official Plugins.

    Need React or React Native expertise you can count on?

    Let's talk