Perf: lazy-load Inspector + CommandPalette, swap setInterval for rAF - #176
Merged
Conversation
Three small wins in the creator hot path: 1. Inspector (FX panel) was imported at the top of creator.tsx. It pulls react-colorful (~16KB chunk after split). Most visitors never open it. Now loaded via `next/dynamic` with ssr:false — separate chunk, fetched only when the FX button is clicked. 2. CommandPalette was mounted in the root layout, so every page paid for its bundle even though it's only used on ⌘K. Also `next/dynamic` now. 3. Creator's animation loop used `setInterval(FRAME_MS)`. That keeps firing on hidden tabs (battery drain) and isn't vsync-aligned. Swapped for `requestAnimationFrame` with a FRAME_MS throttle inside the step callback — same 72ms tick cadence, auto-pauses when tab is hidden. Build verified: Inspector + react-colorful land in their own chunk (16.4KB) instead of the main creator bundle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Three low-hanging perf wins.
creator.tsx; pulledreact-colorfulinto the main bundle even for visitors who never open FX.next/dynamic({ ssr: false })puts it in its own ~16KB chunk fetched on first FX toggle.next/dynamicnow.setInterval(FRAME_MS)kept firing on hidden tabs (battery drain) and wasn't vsync-aligned. Switched torequestAnimationFramewith a FRAME_MS throttle inside the step callback — same 72ms tick, auto-pauses when tab is hidden.Build verified:
react-colorfulchunk is now a separate split.Test plan
prefers-reduced-motionstill freezes to static frame.🤖 Generated with Claude Code