feat(require-profiler-plugin): add Require Profiler plugin #157
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add a Metro require profiler plugin that instruments require() calls to track module initialization times in React Native applications. This plugin provides developers with detailed insights into module loading performance through an interactive flame graph visualization, helping identify slow-loading modules and optimize app startup times.
The plugin consists of:
Metro instrumentation: Hooks into Metro's SYSTRACE system to automatically track all require() call timings
React Native integration: DevTools hook that communicates with the Rozenite platform
UI visualization: Interactive flame graph showing module dependency trees with color-coded timing data
Performance metrics: Real-time display of total initialization time, module count, and per-module evaluation times
Context
This plugin was implemented to solve the challenge of understanding module loading performance in React Native applications. Without visibility into which modules take the longest to initialize, developers struggle to optimize app startup times and identify candidates for lazy loading.
The implementation uses Metro's existing SYSTRACE instrumentation infrastructure, which provides low-overhead timing measurements without significantly impacting development performance. The flame graph visualization makes it intuitive to identify performance bottlenecks in complex module dependency trees.
Testing
The plugin was tested manually against the playground app.