The governance, stats, and LP dashboard pages import heavy chart libraries that should not be included in the initial bundle. Code splitting at the route level improves initial load time for all users.
Requirements and context
- Use Next.js
dynamic() imports for: recharts chart components, PDF export library, rich text editor (if used)
- Ensure dynamic imports have appropriate loading fallbacks (skeleton or spinner)
- Measure bundle size before and after (include in PR description)
- Target: main bundle < 200KB gzipped
Suggested execution
git checkout -b perf/route-level-code-splitting
- Identify heavy imports in each page
- Apply
dynamic() with SSR disabled where appropriate
- Add loading fallbacks
- Run
next build and document bundle size changes
Example commit message
perf: implement route-level code splitting for chart and PDF libraries
The governance, stats, and LP dashboard pages import heavy chart libraries that should not be included in the initial bundle. Code splitting at the route level improves initial load time for all users.
Requirements and context
dynamic()imports for:rechartschart components, PDF export library, rich text editor (if used)Suggested execution
dynamic()with SSR disabled where appropriatenext buildand document bundle size changesExample commit message
perf: implement route-level code splitting for chart and PDF libraries