| name | perf-budget-enforcer |
| description | optimize bundle size and runtime performance. Trigger when the app is slow, bundle is too large, or build warnings appear. Checks lazy loading, asset sizes, and render loops. |
Performance Budget Enforcer
Analyze and optimize application performance, focusing on bundle size and runtime efficiency.
Workflow
-
Measure the Baseline
Run the production build to see chunk sizes.
pnpm run build
- Goal: Main entry point < 300kB gzipped.
- Warning: Any chunk > 500kB.
-
Identify Bottlenecks
- Large Dependencies: Pixi.js, Tone.js. Are they lazy-loaded?
- Assets: Large images or audio embedded in the bundle? Move to
public/.
- Code Splitting: Are routes lazy-loaded in the current TSX app root or
src/components/SceneRouter.tsx?
-
Optimize
- Lazy Loading: Use
React.lazy() for heavy components (PixiStage, ToneSynth).
- Dynamic Imports:
import('pixi.js') only when needed.
- Vite Config: Adjust
manualChunks in vite.config.js.
-
Runtime Check
- FPS: Check
PixiTicker for heavy logic.
- Memory: Ensure
destroy() is called on unused Pixi objects.
Example
Input: "The initial load takes too long."
Action:
- Run build. See
index.js is 1.2MB.
- Analyze:
Pixi.js and Tone.js are in the main bundle.
- Fix:
- Change
import * as Tone to dynamic import in AudioManager.
- Lazy load
GameScene.
- Run build again.
index.js drops to 200kB.
Output:
"Lazy-loaded Pixi and Tone. Main bundle size reduced by 80%. Initial load is now under 1s."
Skill sync: compatible with React 19.2.6 / Vite 8.0.10 / Tailwind 4.2.4 baseline as of 2026-05-20.
